title: Replace object in array on react state
body: <p>This question might fall a little on the side of a "best practice" question, but please bear with me.</p>
  
  <p>Here is a portion of my state:</p>
  
  <pre><code>this.state = {
    typeElements: {
      headers: [
          {
            name: "h1",
            size: 70,
            lineHeight: 1.25,
            kearning: 0,
            marginAfter: 0
          }, {
            name: "h2",
            size: 70,
            lineHeight: 1.25,
            kearning: 0,
            marginAfter: 0
          }, {
            name: "h3",
            size: 70,
            lineHeight: 1.25,
            kearning: 0,
            marginAfter: 0
          }...
  </code></pre>
  
  <p>What I need to do is REPLACE the object at a given index on the headers array.</p>
  
  <p>I don't know how to do that with the setState method as in <code>this.setState(headers[1] = {obj})</code> - but that's obviously invalid. My current method is creating a new array and clobbering the old one like this:</p>
  
  <pre><code>_updateStyle(props) {
    let newState = Object.assign({}, this.state)
    newState.typeElements.headers[props.index] = props
    this.setState(newState)
  };
  </code></pre>
  
  <p>For my small hacky project I guess it's OK but I feel like this is super heavy handed and would quickly lead to performance issues at any kind of scale.</p>