title: how to modify a specific object at a index using spread operator in react-redux?
body: <p>I want to use spread operator. Scenario is that there are no of players (displayed as player tile on UI). Whenever I am clicking on any of player-tile, it is becoming active (getting highlighted). Condition is that at a time only one player should be highlighted. So, when a player-tile is clicked its attribute <code>ifActive: true</code>, and rest of players attribute <code>ifActive: false</code>
  The <code>playerReducer</code> is getting clicked player-id as <code>action.payload</code> (<code>action.payload</code> is giving the id of player which is currently clicked). Now I have to modify my <code>state</code> without mutating it. I have to use spread operator for it. how to modify a specific object at a index using spread operator?</p>
  
  <pre><code>const initialPlayerState = {
    tabs: [
      { id: 1, name: 'player 1', ifActive: false },
      { id: 2, name: 'player 2', ifActive: false },
      { id: 3, name: 'player 3', ifActive: false },
    ]
  } 
  const playerReducer = (state = initialPlayerState , action) =&gt; {
      switch (action.type) {
          case SELECT_PLAYER:
            //how to modify state using spread operator, and how to modify 
            //a specific object at a specific index.  
            return { ...state, /*some code hrere*/};
          default:
            return state;
      }
  }
  </code></pre>
  
  <blockquote>
    <p>how to modify a specific object at a index using spread operator? Strictly, I have to use spread operator and each player should have <code>ifActive</code> attribute.</p>
  </blockquote>