title: React/ Redux - Targeting specific child from mapped array
body: <p>I have the following array of teams that are being mapped out into Team components:</p>
  
  <p><strong>parent.js</strong></p>
  
  <pre><code>render() {
      let teamArray = this.props.teamsReducer.teams;
      &lt;ul&gt;
          {teamArray.map((team) =&gt; {
              &lt;Team key={team._id} /&gt;
          })}
      &lt;/ul&gt;
  }
  </code></pre>
  
  <p><strong>Team.js</strong></p>
  
  <pre><code>render() {
      let getTeamDetailsAnimation = this.props.teamReducer.getTeamDetailsAnimation;
  
      return (
          &lt;li className='indent'&gt;
              &lt;span className={"cta " + getTeamDetailsAnimation} onClick={() =&gt; {this.chooseTeam(team._id,team.name)}}&gt;Select&lt;/span&gt;
          &lt;/li&gt;
      )
  }
  </code></pre>
  
  <p><code>getTeamDetailsAnimation</code> basically gets updated from being an empty string to 'active' which in turn shows a loading spinner while an AJAX request is made. Once the AJAX request is finished <code>getTeamDetailsAnimation</code> gets updated back to an empty string and hence the loading spinner is removed.</p>
  
  <p>The issue i'm having trouble understanding how to tackle is how to apply the <code>getTeamDetailsAnimation</code> to the relevant Team component that was clicked. At the moment seeing as every Team component that is rendered has that part of the teamReducer applied to it, when I click one and an ajax request is made to get the team details then all the Team components show the loading spinner. </p>
  
  <p>I thought about just doing a setState within that Team component to keep the state local to that component but the issue here is my <code>chooseTeam</code> function dispatches an action that lives in a Thunk to make the Ajax request and I need to be able to update the state only when the request is complete which is not local to that component. </p>
  
  <p>As i've setup patterns to keep all my AJAX requests external to my components I want to try and keep it that way, is it possible to keep this AJAX request external to the component given i'm only try to target the relevant component?</p>
  
  <p>Thanks!</p>