What is the best way to switch the CSS style of a button that has been mapped

Question

What is the best way to switch the CSS style of a button that has been mapped

I'm currently working on toggling the CSS class for an individual button that is created from a mapped array.

Although my code is functional, it toggles the CSS class for all buttons in the mapped array instead of just the one selected.

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

How can I modify my code so that only the CSS class of the selected button toggles?

javascript css reactjs

Answer 1

Answer №1

Introduce a new component named Togglebutton to store the toggle functionality within it. This approach allows you to toggle each button individually.

An alternative solution could be:

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>

Answer 2

Introduce a new component named Togglebutton to store the toggle functionality within it. This approach allows you to toggle each button individually.

An alternative solution could be:

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>

Answer 3

Answer №2

I came up with a solution by creating an array for the className and updating its content onClick, like this:

                        <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 solution resolves the issue and allows me to choose one or more buttons in sequence. Amila's answer impressed me with its simplicity, so I will mark theirs as accepted.

Answer 4

I came up with a solution by creating an array for the className and updating its content onClick, like this:

                        <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 solution resolves the issue and allows me to choose one or more buttons in sequence. Amila's answer impressed me with its simplicity, so I will mark theirs as accepted.

What is the best way to switch the CSS style of a button that has been mapped

Answer №1

Answer №2

Similar questions

Angular directive becomes disabled when transferred between different DOM elements

Sending data from child components to parent components in Angular

Is there a way to execute two files concurrently in JavaScript using node.js?

Issue with react-router-dom loader defer type issue

Mapping a list with sections can easily be achieved by breaking down the elements

Container containing sliding content underneath

Issue with Ajax call not triggering the Controller Action in MVC

Within the useEffect hook, the React state is found to be void

What is the definition of the term "WebapiError"?

No response text returned from the local Ajax request

Retrieve nested JSON data from an AJAX request

Enhance Laravel 5 by integrating browserify into the Elixir build process

Launched a website, but I can't access it because of the HSTS restriction

Can getServerSideProps be adjusted to avoid triggering a complete page reload after the first load?

What is the best way to access elements of a certain class that begin with a specific string?

How can I access the value of `var` from inside the return statement of a React component?

Unable to render content following API request

When clicking on the side-bar, it does not respond as expected

Tips for maintaining synchronization of Next.js data between re-renders?

The CSS property 'clear:both;' is not functioning properly on IE7 browsers whereas works fine on IE8/IE9, Firefox, Chrome, and other browsers