CODEWITHSUNDEEP
javascriptcssreactjsbutton
Dylan Bozarth
Dylan Bozarth

Reputation: 1694

Allowing only one active state across multiple buttons

I am trying to have 3 buttons that toggle their active state based on if the others are clicked.
So if button 1 is active, button 2 and 3 should not be. My buttons are arranged in the following way.

<ButtonClickable3  name="Medium" value="10" onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Large" value="15" onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Extra Large" value="20" onClick={(event) => addPizza(event)}></ButtonClickable3>

And the component is this

const ButtonClickable3 = (props) => {
    const [isActive, setActive] = useState("false");
    const handleToggle = (e) => {
     setActive(!isActive);
     props.onClick(e)
     
    }; 
     return <button
               type="button"
               value={props.value}
               name={props.name}
               className={isActive ? "button btn fourth" : "button btn fourthActive"}
               onClick={handleToggle}
             >
              {props.name}
             </button>
   
   }

Currently the only thing I can accomplish is having all the buttons turn on and off together. I.E. One is clicked and they all change active state.
How am I able to make only one be active at a time?
I have put my code in a codesanbox

here Thank you for your help.

Upvotes: 0

Views: 1619

Answers (1)

peteredhead
peteredhead

Reputation: 2804

The state for the buttons needs to be moved from the ButtonClickable3 component up to the parent.

So you would have something like

const [selectedPizzaSize, setSelectedPizzaSize] = useState()

Then pass in a selected prop to the components themselves

<ButtonClickable3 name="Medium" value="10" selected={selectedPizzaSize === "10"} onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Large" value="15" selected={selectedPizzaSize === "15"} onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Extra Large" value="20" selected={selectedPizzaSize === "20"} onClick={(event) => addPizza(event)}></ButtonClickable3>

You'll need to call setSelectedPizzaSize inside your addPizza function

Upvotes: 1

Related Questions