title: React - How to condition the execution of a function on the state (on the change of state)?
body: <p>I have a button. If you click it, the text changes (due to setState({})). I want to (only if) the button was clicked and the text changes to pop up a modal component. The function for modal pop up again changes states. The modal should also pop up 1-3 sec after the change. I tried using timeout(function...) but that didn't work. Calling 2 functions only works for text change but not for the modal popup. Any help would be amazing!</p>
  
  <pre><code>    class App extends React.Component {
          constructor(props) {
              super(props)
              this.state = {
                  display: false,
                  modal: false
              }
              this.onClick = this.onClick.bind(this);
          }
          change() {
              this.setState({
                  display: !this.state.display
              })
          };
          toggle() {
              if (this.state.modal == true) {
                  this.setState({
                      modal: !this.state.modal
                  })
              }
          };
  
          onClick() {
              this.change()
              this.toggle()
  
          }
          render() {
              if (this.state.display) {
                  return &lt;a onClick={() =&gt; { change(); toggle();}}&gt;&lt;p&gt;Hello&lt;/p&gt; &lt;/a&gt;
                      &lt;Modal onClick={this.onClick} status={this.state.modal}/&gt;
  
              } else {
                  return &lt;a onClick={this.onClick}&gt; &lt;p&gt;Bye&lt;/p&gt;&lt;/a&gt;
              }
          }
      }
  </code></pre>
  
  <p>Insight my Modal component:</p>
  
  <pre><code>....
      return(
    &lt;div className="modal" data-status={this.props.status}&gt;
  ....
  </code></pre>