title: React, how to toggle background color of just one button?
body: <p>I try to change background color of each button after click. Problem is, that it works for all of the buttons together, instead of just for one which was clicked. I think, that I should use e, or index to fix it, but I really don't know how to do this.</p>
  <p>App.js</p>
  <pre><code>const initialState = [
    {
      person: &quot;Ela&quot;,
      age: 48
    },
    {
      person: &quot;Natalia&quot;,
      age: 28
    }
  ];
  
  const green = &quot;#39D1B4&quot;;
  const yellow = &quot;#FFD712&quot;;
  
  export default function App() {
    const [person, setPerson] = useState(initialState);
    const [buttonColor, setButtonColor] = useState(green);
  
    function handleColorChange(e) {
      const button = e.target.style.backgroundColor;
      const newButton = e.target.style.backgroundColor;
  
      const newColor = buttonColor === green ? yellow : green;
      setButtonColor(newColor);
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {person.map((per, i) =&gt; {
          return (
            &lt;Person
              color={buttonColor}
              key={i}
              index={i}
              onClick={handleColorChange}
              person={per}
            /&gt;
          );
        })}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Person.js</p>
  <pre><code>import React from &quot;react&quot;;
  
  export default function Person({ person, onClick, color, index }) {
    return (
      &lt;&gt;
        &lt;h3&gt;My name is {person.person}&lt;/h3&gt;
        &lt;h3&gt;My age is {person.age}&lt;/h3&gt;
        &lt;button
          style={{ backgroundColor: color }}
          color={color}
          name={person.person}
          onClick={onClick}
          index={index}
        &gt;
          Change color
        &lt;/button&gt;
        {index}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Thank you!</p>