title: React not sending value to component
body: <p>I'm new at react, and for training i'm doing a simple project to rank books. For now, the user types in the book he or she wants to vote for. If that input is empty, I return a error message, but if it's not it will return a sucess message.</p>
  
  <p>Here's the input: </p>
  
  <pre><code>&lt;form onSubmit={this.onSubmit}&gt;
       &lt;input ref={input =&gt; this.input = input} /&gt;&lt;br /&gt;
       &lt;button type="submit"&gt;Tell us&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here the onSubmit code binded to the input <code>onSubmit</code></p>
  
  <pre><code>onSubmit(event) {
      event.preventDefault();
      if(this.input.value===''){
          console.log('========ENTRADA INVÁLIDA=========')
          this.setState({
              messageSucess: false,
              openDialog: true
          });
          this.input.focus();
      }        
      else{
          console.log('The user voted:')
          console.log(this.input.value)
          this.setState({
              bestBook: this.input.value,
              messageSucess: true,                                
              openDialog: true
          });
          this.input.value = '';
          this.input.focus();
      }
  }
  </code></pre>
  
  <p>And the component I send the <code>messageSucess</code> variable will only check if it is true or false. If it is true, return the sucess message. If it's not, the error message. The code:</p>
  
  <pre><code>class DialogModal extends React.Component {
      render() {
          //Return's nothing if it's show property is false.
          if (!this.props.show) {
              return null;
          }
  
          //Return message of sucess or error.
          return (
              &lt;div&gt;
                  {this.props.messageSucess ? (
                       &lt;div className="Modal"&gt;
                           &lt;div className="Modal-Body sucess-message"&gt;
                               &lt;br/&gt;Thanks vor voting {this.props.children}, we will tell everybody about this sweet piece of violence.
                           &lt;/div&gt;
                       &lt;/div&gt;
                   ) : (
                       &lt;div className="Modal"&gt;
                           &lt;div className="Modal-Body error-message"&gt;
                               &lt;br /&gt;Please, enter the book you want to vote for.
                           &lt;/div&gt;
                       &lt;/div&gt;
                   )}
              &lt;/div&gt;
          );
      }
  }
  
  DialogModal.propTypes = {
      onClose: PropTypes.func.isRequired,
      show: PropTypes.bool,
      messageSucess: PropTypes.bool,
      children: PropTypes.node
  };
  
  export default DialogModal;
  </code></pre>
  
  <p>But for some reason the messageSucess is not getting to the DialogModal component. To be sure I tried to <code>console.log</code> it's value in several parts of the code, like before the return in the    <code>ModalDialog</code>, or just after 
     <code>this.input.focus()</code> in the main class, but it's always undefined. I've been following the <a href="https://reactjs.org/docs/conditional-rendering.html" rel="nofollow noreferrer">conditional rendering page of react</a> but got nothing so far.</p>
  
  <p>**UPDATE: ** As asked in the comments, here's where I add the DialogModal component: </p>
  
  <pre><code>            &lt;DialogModal 
                  show={this.state.openDialog}
                  onClose={this.modalOpened}&gt;
              &lt;/DialogModal&gt;
  </code></pre>
  
  <p>The <code>onClose</code> event will just change the show property to it's inverse. And I checked to be importing everything properly.</p>