title: this.props working in console.log of child component, but not rendering
body: <p>I'm passing a recently updated state variable to a child component. In that child component I'm able to <code>console.log(this.props.response.message)</code> and see the expected result of the recently updated variable. However, the <code>this.props.response.message</code> is not rendering. Do I need to perform some action in a React Lifecycle method? If so, which one and how would that look?</p>
  
  <p><strong>Parent Component</strong></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>import React, { Component } from 'react';
  import axios from 'axios';
  import FormSuccess from './FormSuccess';
  
  export default class NewRuleForm extends Component {
    constructor(props) {
      super();
  
      this.state = {
        submitSuccess: false,
        isOpen: false,
        response: {}
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    async handleSubmit(e) {
      let response = await axios.post('localhost:5000',
        {
          data: e.target.id.value
        }
      )
      if (response.data.success) {
        this.setState({
          submitSuccess: true,
          response: response.data
        })
  
      } else {
        this.setState({
          submitSuccess: false,
        })
      }
     return response
    }
  }
  render() {
     if (this.state.submitSuccess === true) {
       return &lt;FormSuccess result={this.state.response} /&gt;
     }
  
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;input type="text" name="id"/&gt;
      &lt;/form&gt;
    )
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Child Component</strong></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>import React, { Component } from 'react';
  
  export default class FormSuccess extends Component {
    constructor(props) {
      super();
    }
  
    render() {
      console.log(this.props.result.message) // works
      
      return (
        &lt;div&gt;
          &lt;h1&gt;Successful Form Submission&lt;/h1&gt;
          {/* below doesn't render */}
          &lt;p&gt;{this.props.result.message}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Again, in that child component I am able to <code>console.log(this.props.response.message)</code> and see the expected result of the recently updated variable. However, it does not render.</p>