title: Toggle item in an array react
body: <p>I want to toggle a property of an object in an array. The array looks as follows. This is being used in a react component and When a user clicks on a button I want to toggle the winner.</p>
  
  <pre><code>const initialFixtures = [{
      teams: {
        home: 'Liverpool',
        away: 'Manchester Utd'
      },
      winner: 'Liverpool'
    },
    {
      teams: {
        home: 'Chelsea',
        away: 'Fulham'
      },
      winner: 'Fulham'
    }, ,
    {
      teams: {
        home: 'Arsenal',
        away: 'Tottenham'
      },
      winner: 'Arsenal'
    }
  ];
  </code></pre>
  
  <p>My react code looks something like this</p>
  
  <pre><code>function Parent = () =&gt; {
  
    const [fixtures, setUpdateFixtures] = useState(initialFixtures)
    const toggleWinner = (index) =&gt; {
       const updatedFixtures = fixtures.map((fixture, i) =&gt; {
             if (i === index) {
                  return {
                      ...fixture,
                      winner: fixture.winner === home ? away : home,
                  };
              } else {
                  return fixture;
              }
       }) 
       setUpdateFixtures(updatedFixtures);
    }
  
    return &lt;Fixtures fixtures={fixtures} toggleWinner={toggleWinner} /&gt;;
  
  }
  
  
  function Fixtures = ({ fixtures, toggleWinner }) =&gt; { 
    fixtures.map((fixture, index) =&gt; ( 
      &lt;div&gt;
          &lt;p&gt;{fixture.winner} &lt;/p&gt;
      &lt;button onClick = {() =&gt; toggleWinner(index)}&gt; Change Winner&lt;/button&gt; 
      &lt;/div&gt;
    ))
  }
  </code></pre>
  
  <p>the code works but it feels like it is a bit too much. I am sure there is a better more succinct way of doing this. Can anyone advise? I do need to pass the fixtures in from the parent of the <code>Fixture</code> component for architectural reasons.</p>