title: Update nth item in array in state in parent from child in React?
body: <p>In my top level component I have a function to update state. I pass this down to different child elements so that they can update my main state. </p>
  
  <p>In my top level component:</p>
  
  <pre><code>  updateValue(item, value) {
      this.setState({[item]: parseInt(value)});
    }
  </code></pre>
  
  <p>This has worked so far however now I need to update the nth item in an array. </p>
  
  <p>My top level state is like this:</p>
  
  <pre><code>this.state = {
    chosenExercises: [
      'Bench press',
      'Squat',
      'Pull up'
    ]
  }; 
  </code></pre>
  
  <p>And in my child component Im trying to do something like:</p>
  
  <pre><code>this.props.updateValue('chosenExercises'[1], 'New exercise');
  </code></pre>
  
  <p>So that my state would then be: </p>
  
  <pre><code>this.state = {
    chosenExercises: [
      'Bench press',
      'New exercise',
      'Pull up'
    ]
  }; 
  </code></pre>
  
  <p>Am I going about this the correct way? Or should my state be key value pairs?</p>
  
  <pre><code>this.state = {
    chosenExercises: {
      0: 'Bench press',
      1: 'New exercise',
      2: 'Pull up'
    }
  };
  </code></pre>
  
  <p>This would potentially solve some of my problems of making the exercises easier to target but Im not sure which is best practice. </p>