title: Pass States between Components - ReactJS
body: <p>I am trying to pass some states between components however the values are always undefined. </p>
  
  <p>I have a component called Home. When the user types in their email and password to login I want to pass those states to my other component i.e. So I have the users login information. However, the console.log statements show they are undefined. </p>
  
  <p>Home.js in render method</p>
  
  <pre><code>return (
    &lt;div&gt;
      &lt;HomePage signInEmail={this.state.signInEmail} signInPassword={this.state.signInPassword}/&gt;
      &lt;p&gt;Account&lt;/p&gt;
      &lt;button onClick={this.logout}&gt;Logout&lt;/button&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Below is what I have tried for HomePage.js</p>
  
  <pre><code>constructor(props) {
      super(props);
         this.state = {
          noResp: ''
  
      }
  }
  
  componentDidMount() {
      console.log('Component Mounted!');
      console.log('this.props.signInEmail  ' + this.props.signInEmail );
      console.log('this.props.signInPassword: ' + this.props.signInPassword);
  }
  </code></pre>
  
  <p>The above comes to undefined. In my Home.js, I can get the values I need but I can't seem to pass these to a different component.</p>