Question: I have three buttons using the same click handler. - My desire is to only change the color of one button when clicked.

If another button is clicked I want the previously clicked button to go back to the color 'blue' (original state).

Example code below:

```
import React, { useState } from 'react';

export default function App() {
    const [state, setState] = useState({
        name: 'bob',
        color: 'blue',
    });

    const handleColor = (e) => {
        setState((state) => ({
            ...state,
            color: 'red',
        }));
    };

    return (
        <div>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me</button>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me 2</button>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me 3</button>
        </div>
    );
}

```

Answer: 
If you only want one button active at a time, keep track of which one is active instead of what color it is.

```
// hypothetical list of buttons. these could be objects with labels, etc.
// but for the purposes of this example they're just empty slots.
const buttons = Array(3);

// the index of the currently active button
const [active, setActive] = useState();

return (
  <div>
    { buttons.map((button, index) => ( // render a button for each item in the array
      <button
        style={active === index ? { backgroundColor: 'red' } : {}}
        onClick={() => setActive(index)}>
          Click Me
      </button>
    )}
  </div>
)

```
you have to maintain separate state for each button.
you can do something like this

```
import React, { useState } from 'react';

export default function Parent() {

    const initialButtonState = {
        color1: 'blue',
        color2: 'blue',
        color3: 'blue',
    } 

    const [state, setState] = useState({...initialButtonState , name: 'bob'});

    const handleColor = (colorName) => {
        setState((state) => ({
            ...state,
            ...initialButtonState ,
            [colorName] : 'red'
        }));
    };

    return (
        <div>
         <button style={{ backgroundColor: color1 }} onClick={ () => handleColor("color1))}>Click Me</button>
         <button style={{ backgroundColor: color2 }} onClick={() => handleColor("color2")}>Click Me 2</button>
         <button style={{ backgroundColor: color3 }} onClick={() => handleColor("color3")}>Click Me 3</button>
        </div>
    );
}

```