Question 244433 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – What is the best practice to set active on only 1 component

I have multiple buttons in which i want only 1 selectable, when i click over one of these buttons, an active class gets added to it, while the other buttons active classes gets removed. I am actually using next js and i am fairly new to it.

    return ( 
        <div className="flex py-24 bg-hebdo w-full">
            <div className="flex flex-col gap-5 justify-center items-center w-full">
                <h2>HEBDO</h2>
                <div className="flex items-center justify-between gap-2 border flex-grow">
                    <button className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${active ? 'active' : ''}`} onClick={clickActivate}>
                        <DayItem />
                    </button>
                    <button className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${active ? 'active' : ''}`} onClick={clickActivate}>
                        <DayItem />
                    </button>
                </div>      
            </div>
           
        </div>
     );

here is my react component, i usually use querySelectorAll to remove all classes and keep only the one i want, but in next js i think its not good to use it basic javascript while we have react hook ‘useState’.

thank you in advance

Tags:

2

Answers


  1. 0

    Yes you can use UseState. In clickActivate method , you can set the activeButton state.

    const [activeButton, setActiveButton] = useState(null);

  const clickActivate = (index) => {
    setActiveButton(index);
  };

return (
    <div className="flex py-24 bg-hebdo w-full">
      <div className="flex flex-col gap-5 justify-center items-center w-full">
        <h2>HEBDO</h2>
        <div className="flex items-center justify-between gap-2 border flex-grow">
          <button
            className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${
              activeButton === 0 ? 'active' : ''
            }`}
            onClick={() => clickActivate(0)}
          >
            <DayItem />
          </button>
          <button
            className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${
              activeButton === 1 ? 'active' : ''
            }`}
            onClick={() => clickActivate(1)}
          >
            <DayItem />
          </button>
        </div>
      </div>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    To achieve this, you need to manage the state of the ‘active’ button and update it when a new button is clicked. Here is a step-by-step approach to solve this problem:

    1. First, you need to create a state variable, activeButton, which will
      keep track of the currently active button. You can use the useState
      hook from React for this. The initial state will be null as no
      button is active when the component first renders.
        const [activeButton, setActiveButton] = useState(null);
    1. Next, modify the onClick handler for the buttons. When a button is clicked, the activeButton state should be updated to the index of the clicked button.
    <button onClick={() => setActiveButton(0)}>
    <DayItem />
</button>
<button onClick={() => setActiveButton(1)}>
    <DayItem />
</button>
    1. Then, modify the className attribute of the button elements. Add the ‘active’ class only if the activeButton state matches the index of the button.
    <button className={`${activeButton === 0 ? 'active' : ''}`} onClick={() => setActiveButton(0)}>
    <DayItem />
</button>
<button className={`${activeButton === 1 ? 'active' : ''}`} onClick={() => setActiveButton(1)}>
    <DayItem />
</button>
    1. Finally, ensure that your CSS has the necessary styles for the ‘active’ class.

    Here is the final code:

    import { useState } from 'react';

function MyComponent() {
    const [activeButton, setActiveButton] = useState(null);

    return (
        <div className="flex py-24 bg-hebdo w-full">
            <div className="flex flex-col gap-5 justify-center items-center w-full">
                <h2>HEBDO</h2>
                <div className="flex items-center justify-between gap-2 border flex-grow">
                    <button className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeButton === 0 ? 'active' : ''}`} onClick={() => setActiveButton(0)}>
                        <DayItem />
                    </button>
                    <button className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeButton === 1 ? 'active' : ''}`} onClick={() => setActiveButton(1)}>
                        <DayItem />
                    </button>
                </div>      
            </div>
        </div>
    );
}

    As you can see, this solution uses a state variable to keep track of the active button and updates the state when a button is clicked. When rendering, it checks if the current button index matches the active button state and adds the ‘active’ class accordingly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search