How to Toggle Class for Each li Element in React.js

---

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---

The Problem

You may have encountered a situation where you have multiple <li> elements, each with a button that toggles a class when clicked. However, when you try to implement this, you might find that clicking any button toggles all list items together, which isn't the desired behavior.

Here’s an example of what you might start with:

[[See Video to Reveal this Text or Code Snippet]]

As noted, clicking one button toggles the class for all list items because they all rely on the same state variable, show.

The Solution

To achieve independent toggling for each list item, we need to give each <li> its own state. This can be accomplished by creating a separate component for the list item, which can manage its own state with its own useState hook. Here’s how you can do that:

Step 1: Create a New Component

We will create a ListItem component that will encapsulate the logic for each individual list item.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update the Main Component

Next, we'll update the About component to use the new ListItem component and render it multiple times.

[[See Video to Reveal this Text or Code Snippet]]

Final Code Example

Here’s how the complete implementation will look:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Next time you encounter a situation where you want to apply different states to multiple elements, consider breaking them into their own components to manage state effectively.

Feel free to try this solution in your React applications and enjoy the clarity and functionality it brings!