在组件之间传递状态-ReactJS

Question

I am trying to pass some states between components however the values are always undefined.

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 ie So I have the users login information. However, the console.log statements show they are undefined.

Home.js in render method

return (
  <div>
    <HomePage signInEmail={this.state.signInEmail} signInPassword={this.state.signInPassword}/>
    <p>Account</p>
    <button onClick={this.logout}>Logout</button>
  </div>
);

Below is what I have tried for HomePage.js

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);
}

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.

Answer 1

You can access it by

this.props.signInEmail 
this.props.signInPassword

in your HomePage.js.

When you want to pass some data from parent to child component, they are called props.

Perhaps this help! State and Props in React

You can recieve props from parent component by writing

class HomePage extends React.Component{
    constructor(props){
         super(props);
}
render(){
    return(//THE JSX you wanna return)
 }
}

in the child component ie, HomePage.js in your case!