title: State arrays (not objects) and the spread operator
body: <p>I am updating a sub array in a react state array of 'components' with a new key value like this. </p>
  
  <pre><code>this.setState({
      components: {
         ...this.state.components,
         [this.state.key]: {
            ...this.state.components[this.state.key],
            [key]: v
        }
      }
  });
  </code></pre>
  
  <p>this works but it changes this.state.components from an array into an object which I don't want. </p>
  
  <p>I can do </p>
  
  <pre><code>var result = Object.keys(this.state.components).map(function (k) {
     return { [k]: this.state.components[k] };
  });
  
  this.setState({components: result});
  </code></pre>
  
  <p>to fix the data but it seems messy and inefficient to set state twice. Is there a better way? I've tried various forms of using [] instead of {}, but from my understanding of the spread operator this should work.</p>