Pass States between Components - ReactJS
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 i.e. 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.
javascript reactjs
asked Nov 23 '18 at 14:53
user10696040
125
add a comment |
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 i.e. 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.
javascript reactjs
asked Nov 23 '18 at 14:53
user10696040
125
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17
add a comment |
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 i.e. 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.
javascript reactjs
asked Nov 23 '18 at 14:53
user10696040
125
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 i.e. 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.
javascript reactjs
javascript reactjs
asked Nov 23 '18 at 14:53
user10696040
125
asked Nov 23 '18 at 14:53
user10696040
125
edited Nov 23 '18 at 15:15
asked Nov 23 '18 at 14:53
user10696040
125
asked Nov 23 '18 at 14:53
user10696040
125
asked Nov 23 '18 at 14:53
user10696040
125
125
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17
add a comment |
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17
add a comment |
1 Answer
1
active
oldest
votes
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 i.e., HomePage.js in your case!
answered Nov 23 '18 at 14:56
Lucifer
18111
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448851%2fpass-states-between-components-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 i.e., HomePage.js in your case!
answered Nov 23 '18 at 14:56
Lucifer
18111
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
|
show 1 more comment
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 i.e., HomePage.js in your case!
answered Nov 23 '18 at 14:56
Lucifer
18111
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
|
show 1 more comment
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 i.e., HomePage.js in your case!
answered Nov 23 '18 at 14:56
Lucifer
18111
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 i.e., HomePage.js in your case!
answered Nov 23 '18 at 14:56
Lucifer
18111
edited Nov 23 '18 at 15:05
answered Nov 23 '18 at 14:56
Lucifer
18111
answered Nov 23 '18 at 14:56
Lucifer
18111
answered Nov 23 '18 at 14:56
Lucifer
18111
18111
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
|
show 1 more comment
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
I still get a empty String/ undefined on the console
– user10696040
Nov 23 '18 at 15:00
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
you have to recieve props too
– Lucifer
Nov 23 '18 at 15:01
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
See the edit on the answer, that should help!
– Lucifer
Nov 23 '18 at 15:03
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Is that done in the this.state = {...}
– user10696040
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
Its done inside the Component class
– Lucifer
Nov 23 '18 at 15:04
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448851%2fpass-states-between-components-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you have to understand what state and props are in react. Refer this agiliq.com/blog/2018/05/understanding-react-state-and-props
– Lucifer
Nov 23 '18 at 14:59
It appears you're passing the props correctly, can you post the state of your component?
– Dmitriy
Nov 23 '18 at 15:10
Still getting blank string. Reading the link posted below to improve my understanding but not 100% sure why
– user10696040
Nov 23 '18 at 15:17