How to toggle the css of a mapped button?

Question

I'm just trying to figure out how to toggle a css class for an individual button that is generated from a mapped array.

My code works, but it toggles every mapped button, not just the button selected.

                        <div className='synonym-keeper'>
                            {synArr.map((syn) => (
                                <button
                                    className={`synonym ${isPressed && 'active'}`}
                                    onClick={() => toggleIsPressed(!isPressed)}
                                >
                                    {syn}
                                </button>
                            ))}
                        </div>

How do I make just the selected button's css toggle?

You need to add unique id on button. if you want to toggle individual button. — DSDmark
– DSDmark, Commented Dec 3, 2022 at 6:41
When you select a button do you want all the other buttons to be deselected automatically? — Andy
– Andy, Commented Dec 3, 2022 at 6:51

Amila Senadheera · Accepted Answer · 2022-12-03 06:50:19Z

Create another component called Togglebutton and keep the toggle logic in it. That way you can toggle the individual button.

This would also work:

const synArr = ["button 1", "button 2", "button 3"];

const ToggleButton = ({ text }) => {
  const [isPressed, toggleIsPressed] = React.useState(false);

  return (
    <button
      className={`synonym ${isPressed && "active"}`}
      onClick={() => toggleIsPressed(!isPressed)}
    >
      {text}
    </button>
  );
};

function App() {
  return (
    <div className="synonym-keeper">
      {synArr.map((syn) => (
        <ToggleButton text={syn} key={syn}/>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

.synonym.active {
  background-color: green;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Fiattarone · Accepted Answer · 2022-12-03 22:04:11Z

I resolved it by making an array for the className and changing its contents onClick, as below:

                        <div className='synonym-keeper'>
                            {synArr.map((syn, idx) => (
                                <button
                                    className={`synonym ${isPressed[idx]}`}
                                    onClick={() => {
                                        const newIsPressed = [...isPressed];
                                        newIsPressed[idx] === ''
                                            ? (newIsPressed[idx] = 'active')
                                            : (newIsPressed[idx] = '');
                                        setIsPressed(newIsPressed);
                                    }}
                                >
                                    {syn}
                                </button>
                            ))}
                        </div>

This resolves the issue and allows me to select one or more buttons sequentially. I really like the cleanliness of Amila's answer though so I will mark theirs as accepted.

Collectives™ on Stack Overflow

How to toggle the css of a mapped button?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related