Question 74072 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to toggle button color with className in react? – Reactjs

I am trying to toggle a button with hook, classname and id but all buttons toggle color instead of one button that is actually clicked.
The classname is to toggle classname "dark" and null, where .dark changes the button black.

import './Clothing.css'
import data from '../../data/data2.json';

const Clothing = () => {

  const [toggle, setToggle] = useState(null);


  const types = [
    { id: 11, value: 'All' },
    { id: 22, value: 'Cap' },
    { id: 33, value: 'Sweatshirt' },
    { id: 44, value: 'Hoodie' },
    { id: 55, value: 'Shirt' }
  ]

  const handleToggle = (e) => {
    console.log(e.target.id)
    if (types.filter(
      (item) => item.id === e.target.id
    )) return setToggle(!toggle)
  }

        <div className="buttonDiv">
            {
              types.map((t) =>
                <button
                  key={t.id}
                  id={t.id}
                  value={t.value}
                  className={ toggle ? "dark" : null}
                  onClick={(e) => {
                    handleSelectedCategory(e);
                    handleToggle(e);
                  }}>
                  {t.value}
                </button>
              )
            }
          </div>


.clothSection {
    position: absolute;
    top: 25%;
    width: 100%;
    padding: 0 2rem;

    .topMenu {
        display: flex;
        flex-direction: column;
        padding: 2rem 4rem;

        .buttonDiv {
            gap: 2rem;
            display: flex;
            padding: 2rem 0;

            button {
                background-color: var(--InputColor);
                padding: .5rem 1rem;
                border-radius: .5rem;
                font-size: var(--NormalFontSize);
                color: var(--TextColor);
                cursor: pointer;
                border: none;
            }

            .dark {
                background-color: var(--BlackColor);
                color: var(--WhiteColor);
            }
Tags:

2

Answers


  1. 0

    Hello you should use classnames like this:

    classNames({ dark: toggle })
    Login or Signup to reply.
  2. 0

    It is my understanding that you have several buttons. You wish to click a button and have that button dynamically add the .dark class, giving each button its own independent state.

    The issue is that you have toggle and setToggle happening in a parent component. Then you render all of your buttons with the current value of toggle. We want each button to contain its own toggle value.

    New ClothingItem.js

    I added a new component ClothingItem.js, which is responsible for rendering a single clothing item. Notice how this component tracks and sets its own toggle value, utilizing most of the code you had in place to render a button initially.

    const ClothingItem = ({ myKey, id, value }) => {
  const [toggle, setToggle] = useState(false);

  return (
    <button
      key={myKey}
      id={id}
      value={value}
      className={toggle ? "dark" : null}
      onClick={() => {
        // handleSelectedCategory(e);
        setToggle(!toggle);
      }}
    >
      {value}
    </button>
  );
};

    Updated Clothing.js

    We removed all the existing state and the handleToggle() function. In addition, instead of rendering <button>s, we now render <ClothingItem />s, passing in key, id, and value as before.

      return (
    <div className="buttonDiv">
      {types.map((t) => (
        <ClothingItem key={t.id} id={t.id} value={t.value} />
      ))}
    </div>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search