title: setState with delay in ReactJS
body: <p>I want to implement a dialogue system by reading a JSON file, here it is :`</p>
  
  <pre><code>{
     "start": {
        "dialogue1": {
          "text": "Hi! How are you?"
        },
        "dialogue2": {
          "text": "My name is Bill."
        },
        "dialogue3": {
          "text": "What is your name?"
        },
        "dialogue4": {
          "text": "Nice to meet you"
        }
      }
  }
  </code></pre>
  
  <p>And here is the component that reads the JSON file :</p>
  
  <pre><code>import React, { Component } from 'react'
  import Speaking from './Speaking'
  import dialogues from './dialogues/dialogues.json';
  
  
  class myClass extends Component {
    constructor(props) {
      super(props);
      this.goToDialogue = this.goToDialogue.bind(this)
  
      //starts with empty dialogue
      this.state = {
        dialogue: ''
      };
    }
  
    componentDidMount() {
      //starts first dialogue at the beginning
      this.goToDialogue('start')
    }
  
    goToDialogue(dialogueName) {
      //loop through dialogue JSON and update the state
      for (let dialogue in dialogues[dialogueName]) {
        this.setState( {dialogue : dialogues[dialogueName][dialogue].text} )
      }
    }
  
    render() {
      return (
          //give Speaking's component the new dialogue to display
          &lt;Speaking dialogue={this.state.dialogue} /&gt;
      );
    }
  
  }
  
  export default myClass
  </code></pre>
  
  <p>And finally the Speaking component that will display the text</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Speaking extends Component {
    constructor(props) {
      super(props);
      this.showText = this.showText.bind(this)
    }
  
    componentDidUpdate() {
      //showText() will display the message it receives into the paragraph letter by letter
      this.showText(this.props.dialogue, 0, 75 )
    }
  
    showText(message, index, interval) {
      if (index &lt; message.length) {
        this.speak.innerHTML += message[index++]
        setTimeout( () =&gt; { this.showText(message, index, interval); }, interval)
      }
    }
  
    render() {
  
      return (
        &lt;p className="speak" ref={node =&gt; this.speak = node} &gt;&lt;/p&gt;
      );
    }
  }
  
  export default Speaking;
  </code></pre>
  
  <p>Problem is myClass.state.dialogue will be fed with the last loop iteration so it will only display the last dialogue line. <strong>The correct result I want is to display each dialogue line one by one (in other words, setState the dialogue) with a delay between each iteration</strong>. I thought about using a setTimeOut on the setState but it didn't work out.</p>
  
  <p>Any idea how to sort that out? Thanks!</p>