title: Changing React State Array at Specific Index
body: <p>As the title suggests, I'm attempting to target an array inside of my <code>state object</code> but as you would guess if you ever tried. This isn't as straightforward as it sounds. I've looked through a couple of questions here (<a href="https://stackoverflow.com/questions/29537299/react-how-do-i-update-state-item1-on-setstate-with-jsfiddle">React: How do I update state.item[1] on setState? (with JSFiddle)</a> and <a href="https://stackoverflow.com/questions/35174489/reactjs-setstate-of-object-key-in-array">ReactJS - setState of Object key in Array</a>) but neither are solving my problem.</p>
  
  <p>What I need is to target a specific index inside of the <code>noteData</code> array, and update it according to whatever a user types into the <code>&lt;TextArea /&gt;</code> component. Not exactly sure why but my <code>noteData</code> array just read as an array with an empty string <code>noteData = ['']</code>.</p>
  
  <p>If you need a more in-depth look, you can go to <a href="https://stackblitz.com/edit/note-taking" rel="nofollow noreferrer">https://stackblitz.com/edit/note-taking</a> and fork the page and edit it yourself. The file structure is goofy to the say the least. I started using redux and decided against it halfway through.</p>
  
  <h2>state and functions TextArea</h2>
  
  <pre><code>class NoteList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        inputValue: '',
        noteName: [],
        noteData: [],
        selectedNote: []
      }
  }
  
    handleInputValue(e) {
      this.setState({
        inputValue: e.target.value
      });
    }
  
    addNoteFunc(e) {
      this.setState({
        noteName: [ ...this.state.noteName, e.target.value ],
        noteData: [ ...this.state.noteData, '' ]
      });
    }
  
   // everytime the user types, change the value of noteData
    handleNoteData(e, index = this.state.selectedNote[0]) {
      const copyNoteData = Object.assign({}, this.state);
      copyNoteData.noteData[index] = e.target.value;
  
      this.setState(copyNoteData);
    }
  
    handleSelectedNote(index) {
      this.setState({
        selectedNote: [ index ]
      });
    }
  
  &lt;textarea 
    value={this.state.noteData[this.state.selectedNote[0]]}
    handleNoteData={(e, index) =&gt; this.handleNoteData(e, index)}
  /&gt;
  </code></pre>
  
  <h2>The actual TextArea component</h2>
  
  <pre><code>import React from 'react';
  
  const TextArea = props =&gt; {
    return (
      &lt;div className='textarea'&gt;
        &lt;textarea 
          value={props.value}
          onKeyDown={props.handleNoteData}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default TextArea;
  </code></pre>