Replace object in array on react state
<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>