Currently, I am working on building a to-do list application using React. In the CSS styling, I have implemented an animation for when an li element is active, causing it to expand in height. The issue arises from the fact that I have also set up an onClick function on the <span>x </span> within the li element to delete the corresponding item. Since the span is nested inside the li, every time I click on it to delete an item, it triggers a small animation due to sharing the same space as the li. I am uncertain about the best approach to resolve this conflicting behavior.
Here is the structure of the list:
<ul>
<li>
To-do text
<span> X </span>
</li>
</ul>
You can find the complete code on codesandbox