title: Why state changes only on second click?
body: <p>The problem is that the state filterArray changes from null only on second click on button "Обучить". Why?</p>
  
  <p>I really need it to work from the first click. Problem is not in dialog that i call. The function parse input is parsing input to catch words with * at the end.</p>
  
  <p>Dialog is called from the first click, but the state is changing only from second.</p>
  
  <pre><code>class Content extends React.Component {
      constructor(props) {
          super(props);
      // initial state
      this.state = {
          textInput: "",
          filterArray: [],
          projectID: "",
          entity: "",
          synonyms: ""
      };
      this.dialog = React.createRef()
  }
  
  clear = () =&gt; {
      // return the state to initial
      this.setState({
          textInput: "",
          filterArray: []
      });
  };
  
  updateIdandEntity = (value1, value2) =&gt; {
      this.setState({ projectID: value1, entity: value2 })
  }
  
  parseInput = () =&gt; {
      let tempArray = this.state.textInput.split(" "); // `convert string into array`
      let newArray = tempArray.filter(word =&gt; word.endsWith("*"));
      let filterArray  = newArray.map(word =&gt; word.replace('*', ''));
      this.setState({filterArray});
      this.dialog.current.handleClickOpen()
  };
  
  render() {
      return (
          &lt;Paper style={{maxWidth: 936, marginLeft: "250px", overflow: "hidden"}}&gt;
              &lt;AppBar position="static" color="default" elevation={0}&gt;
                  &lt;Toolbar&gt;
                      &lt;Grid container spacing={16} alignItems="center"&gt;
                          &lt;Grid item xs&gt;
                              &lt;TextField
                                  fullWidth
                                  placeholder="Введите фразу которую нужно обучить"
                                  id="textInput"
                                  InputProps={{
                                      disableUnderline: true
                                  }}
                                  value={this.state.textInput}
                                  onChange={e =&gt; {
                                      this.setState({textInput: e.target.value});
                                  }}
                              /&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item&gt;
                              &lt;DialogProject ref={this.dialog} data={this.state.filterArray} updateIdandEntity={this.updateIdandEntity}/&gt;
                              &lt;Button
                                  variant="contained"
                                  color="primary"
                                  style={{
                                      background:
                                          "linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
                                  }}
                                  onClick = {this.parseInput}
                              &gt;
                                  Обучить
                              &lt;/Button&gt;
  </code></pre>