[FIXED] how to add styling to a button in react

Issue

so I have a list of divs in a ul, I want to be able to click one of the divs and add styling when its clicked and when the next button is clicked the styling is deleted from the first one and then added to the second div.

I tried using an isActive state but this applies to all of them at once I only want it to work 1 by 1 like steps

Solution

You could make a list of divs and save state of each button.

For example:

const [buttons, setButtons] = React.useState([
    { title: "1", isActive: false },
    { title: "2", isActive: false },
    { title: "3", isActive: false }
]);

Then you can change state on click:

const handleClick = (title) => {
    setButtons(
      buttons.map((el) =>
        el.title === title
          ? { ...el, isActive: true }
          : { ...el, isActive: false }
      )
    );
  };

https://codesandbox.io/s/falling-fire-6r5b04?file=/src/App.js:271-469

Answered By - Marina Golovanova
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)