title: having trouble passing a prop in React using a component
body: <p>I am trying to pass a prop and generate a simple paragraph. I am following the docs but I am not sure what I am doing wrong. I am sure the solution is utterly simple but I am just not finding it. I take an input and generate a paragraph with that dog's name. Any advice would be greatly appreciated.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class DisplayName extends React.Component{
    render() {
      return (
          &lt;p&gt;
            &lt;span&gt;{this.props.value}&lt;/span&gt;
          &lt;/p&gt;
        )
    }
  }
  
  class NameForm extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        value: ''
      };
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
  
    }
  
    handleChange(event){
      this.setState({
        value: event.target.value
      })
    }
  
    handleSubmit(event){
      event.preventDefault()
      return(
        &lt;DisplayName
          value={this.state.value}
        /&gt;
      )
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;
              Favorite Dog Names:
              &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
            &lt;/label&gt;
            &lt;input type='submit' value='Submit'&gt;&lt;/input&gt;
          &lt;/form&gt;
          &lt;div&gt;
           {this.handleSubmit}
          &lt;/div&gt;
        &lt;/div&gt;
  
      )
    }
  
  }
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;NameForm /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  </code></pre>