How to toggle the css of a mapped button?-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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.