title: Using spread operator to setState in multiple succession
body: <p>I have some values stored in local storage. When my component mounts, I want to load these values into the state. However, only the last property being added is added to the state. I've checked the values on my localStorage, and they are all there. Furthermore, when I log the variables (desc, pic or foo) in the condition block, they are there. </p>
  
  <p>I thought at first each subsequent if block is re-writing the state, but this is not the case as I am using the spread operator correctly (I think!), adding the new property after all pre-existing properties.</p>
  
  <p>I think the problem is that the code in the last if block is running before the state is set in the first if block. How do I write the code so I get all three properties from my local storage into the state?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//what I expect state to be
  {
    textArea: {
      desc: 'some desc',
      pic: 'some pic',
      foo: 'some foo'
    }
  }
  
  //what the state is
  {
    textArea: {
      foo: 'some foo'
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  componentDidMount () {
  
      const desc = window.localStorage.getItem('desc');
      const pic = window.localStorage.getItem('pic');
      const foo = window.localStorage.getItem('foo');
  
      if (desc) {
        console.log(desc) //'some desc'
        this.setState({
          ...this.state,
          textArea: {
            ...this.state.textArea,
            desc: desc,
          },
        }, ()=&gt;console.log(this.state.textArea.desc)); //undefined
      }
  
      if (pic) {
        console.log(pic) //'some pic'
        this.setState({
          ...this.state,
          textArea: {
            ...this.state.textArea,
            pic: pic,
          },
        }, ()=&gt;console.log(this.state.textArea.pic)); //undefined
      } 
  
      if (foo) {
        console.log(foo) //'some foo'
        this.setState({
          ...this.state,
          textArea: {
            ...this.state.textArea,
            foo: foo,
          },
        }, ()=&gt;console.log(this.state.textArea.foo)); //'some foo'
      } 
    }</code></pre>
  </div>
  </div>
  </p>