ReactJs adding 'active' class to a button in a list of buttons

Question

I have a list of buttons created dynamically with the .map function. I am trying to add an "active" class to the button onClick and get rid of the "active" class of the other buttons.

This is what I have so far. The issue is that it's adding the class but not getting rid of the class on the other buttons. Any help is appreciated! Thank you :)

const Buttons = (props) => {
  const [active, setActive] = useState(false);
  const handleClick = (event) => {
    event.preventDefault();
    setActive(true)
  }
    const buttons = props.buttons.map((btn,index) => {
        return(
        
      <button className={active === true ? 'active' : ''} id={btn.id} onClick={handleClick}>{btn.name}</button>
        )
    })
    return (
        <div>
         {buttons}
        </div>
    )
}
export default Buttons;

Your button group seems to have the same functionality as a radio button group, have you considered styling a radio button group to look like buttons? — James
– James, Commented Apr 30, 2021 at 0:18
this can be done in a lot of ways so not going there, the problem with the code above is that you are trying to control the state of 5 different things with one variable, so if any one button does it, everyone shares the same value. — soumitra
– soumitra, Commented Apr 30, 2021 at 0:18

Nick · Accepted Answer · 2021-04-30 00:40:15Z

3

Since you need to know which button is active, it would be better to store the id of the active button in state rather than just a boolean. That way, you can know exactly which one as you map over them should be active.

const Buttons = (props) => {
  const [active, setActive] = useState();

  const handleClick = (event) => {
    event.preventDefault();
    setActive(event.target.id);
  }

  const buttons = props.buttons.map((btn, index) => {
    return (
      <button
        key={btn.id}
        className={active === btn.id ? "active" : undefined}
        id={btn.id}
        onClick={handleClick}
      >
        {btn.name}
      </button>
    );
  });
  return <div>{buttons}</div>;
};

export default Buttons;

edited Apr 30, 2021 at 0:40

answered Apr 30, 2021 at 0:16

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Cybershadow Over a year ago

Can also use index in case an id is not available.

Nick Over a year ago

@Cybershadow OP used btn.id in their code already so I assumed it was fair game.

Cybershadow Over a year ago

Ah good observation, I didn't catch that id parameter at first glance.

Ken Ryan Over a year ago

@Nick Tysm! That worked like a charm. Would this work if I do onClick={handleClick} on <button>? and have a function outside const handleClick = (e) => {e.preventDefault(); setActive(btn.id); ?

Nick Over a year ago

@KenRyan yes! You should be able to use setActive(e.target.id) to get the button's ID

|

Collectives™ on Stack Overflow

ReactJs adding 'active' class to a button in a list of buttons

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related