Mixing
React passing a prop to components return undefined
I'm really confused as to why when I route to http://localhost:3000/subjects/physics of my project.
The variable gradeSelection is defined in App.js state. It is passed to subjectCards.js component via props as gradeSelection, which passes it onto a Subject.js component via props as gradeSelection.
However, this.props.gradeSelection in Subjects.js returns undefined.
Is there something I might possibly be doing wrong?
Console output:
App.js: Year 12 // correct
subjectCards.js: Year 12 // correct
Subject.js: undefined // not correct
App.js
constructor(props) {
super(props);
this.state = {
gradeSelection: "Year 12"
};
}
render() {
console.log("App: "+this.state.gradeSelection)
return (
<Route path="/subjects" render={(props)=>(<SubjectCards {...props} gradeSelection={this.state.gradeSelection} />)} />
);
}
subjectCards.js
let display;
console.log("subjectCards.js: "+props.gradeSelection)
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />
return (
display
);
Subject.js
constructor(props) {
super(props);
console.log("Subject.js: "+this.props.gradeSelection); // undefined
}
Thank you!
EDIT:
When console.log(props) or console.log(this.props) in Subjects.js constructor. gradeSelection inside the console output is still undefined..
I've tried passing a string to gradeSelection in subjectCards.js and the console output was correct in returning the string in Subject.js..
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={"props.gradeSelection"}/>} />
javascript reactjs react-router
asked Nov 22 '18 at 2:08
KennySKennyS
134
add a comment |
I'm really confused as to why when I route to http://localhost:3000/subjects/physics of my project.
The variable gradeSelection is defined in App.js state. It is passed to subjectCards.js component via props as gradeSelection, which passes it onto a Subject.js component via props as gradeSelection.
However, this.props.gradeSelection in Subjects.js returns undefined.
Is there something I might possibly be doing wrong?
Console output:
App.js: Year 12 // correct
subjectCards.js: Year 12 // correct
Subject.js: undefined // not correct
App.js
constructor(props) {
super(props);
this.state = {
gradeSelection: "Year 12"
};
}
render() {
console.log("App: "+this.state.gradeSelection)
return (
<Route path="/subjects" render={(props)=>(<SubjectCards {...props} gradeSelection={this.state.gradeSelection} />)} />
);
}
subjectCards.js
let display;
console.log("subjectCards.js: "+props.gradeSelection)
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />
return (
display
);
Subject.js
constructor(props) {
super(props);
console.log("Subject.js: "+this.props.gradeSelection); // undefined
}
Thank you!
EDIT:
When console.log(props) or console.log(this.props) in Subjects.js constructor. gradeSelection inside the console output is still undefined..
I've tried passing a string to gradeSelection in subjectCards.js and the console output was correct in returning the string in Subject.js..
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={"props.gradeSelection"}/>} />
javascript reactjs react-router
asked Nov 22 '18 at 2:08
KennySKennyS
134
2
did you try to log it inside thecomponentDidMountmethod rather than the constructor?
– quirimmo
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
1
changethis.props.gradeSelectiontoprops.gradeSelection
– Randy Casburn
Nov 22 '18 at 2:14
add a comment |
I'm really confused as to why when I route to http://localhost:3000/subjects/physics of my project.
The variable gradeSelection is defined in App.js state. It is passed to subjectCards.js component via props as gradeSelection, which passes it onto a Subject.js component via props as gradeSelection.
However, this.props.gradeSelection in Subjects.js returns undefined.
Is there something I might possibly be doing wrong?
Console output:
App.js: Year 12 // correct
subjectCards.js: Year 12 // correct
Subject.js: undefined // not correct
App.js
constructor(props) {
super(props);
this.state = {
gradeSelection: "Year 12"
};
}
render() {
console.log("App: "+this.state.gradeSelection)
return (
<Route path="/subjects" render={(props)=>(<SubjectCards {...props} gradeSelection={this.state.gradeSelection} />)} />
);
}
subjectCards.js
let display;
console.log("subjectCards.js: "+props.gradeSelection)
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />
return (
display
);
Subject.js
constructor(props) {
super(props);
console.log("Subject.js: "+this.props.gradeSelection); // undefined
}
Thank you!
EDIT:
When console.log(props) or console.log(this.props) in Subjects.js constructor. gradeSelection inside the console output is still undefined..
I've tried passing a string to gradeSelection in subjectCards.js and the console output was correct in returning the string in Subject.js..
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={"props.gradeSelection"}/>} />
javascript reactjs react-router
asked Nov 22 '18 at 2:08
KennySKennyS
134
I'm really confused as to why when I route to http://localhost:3000/subjects/physics of my project.
The variable gradeSelection is defined in App.js state. It is passed to subjectCards.js component via props as gradeSelection, which passes it onto a Subject.js component via props as gradeSelection.
However, this.props.gradeSelection in Subjects.js returns undefined.
Is there something I might possibly be doing wrong?
Console output:
App.js: Year 12 // correct
subjectCards.js: Year 12 // correct
Subject.js: undefined // not correct
App.js
constructor(props) {
super(props);
this.state = {
gradeSelection: "Year 12"
};
}
render() {
console.log("App: "+this.state.gradeSelection)
return (
<Route path="/subjects" render={(props)=>(<SubjectCards {...props} gradeSelection={this.state.gradeSelection} />)} />
);
}
subjectCards.js
let display;
console.log("subjectCards.js: "+props.gradeSelection)
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />
return (
display
);
Subject.js
constructor(props) {
super(props);
console.log("Subject.js: "+this.props.gradeSelection); // undefined
}
Thank you!
EDIT:
When console.log(props) or console.log(this.props) in Subjects.js constructor. gradeSelection inside the console output is still undefined..
I've tried passing a string to gradeSelection in subjectCards.js and the console output was correct in returning the string in Subject.js..
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={"props.gradeSelection"}/>} />
javascript reactjs react-router
javascript reactjs react-router
asked Nov 22 '18 at 2:08
KennySKennyS
134
asked Nov 22 '18 at 2:08
KennySKennyS
134
edited Nov 23 '18 at 9:37
KennyS
asked Nov 22 '18 at 2:08
KennySKennyS
134
asked Nov 22 '18 at 2:08
KennySKennyS
134
asked Nov 22 '18 at 2:08
KennySKennyS
134
134
2
did you try to log it inside thecomponentDidMountmethod rather than the constructor?
– quirimmo
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
1
changethis.props.gradeSelectiontoprops.gradeSelection
– Randy Casburn
Nov 22 '18 at 2:14
add a comment |
2
did you try to log it inside thecomponentDidMountmethod rather than the constructor?
– quirimmo
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
1
changethis.props.gradeSelectiontoprops.gradeSelection
– Randy Casburn
Nov 22 '18 at 2:14
2
2
did you try to log it inside the
componentDidMount method rather than the constructor?– quirimmo
Nov 22 '18 at 2:13
did you try to log it inside the
componentDidMount method rather than the constructor?– quirimmo
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
1
1
change
this.props.gradeSelection to props.gradeSelection– Randy Casburn
Nov 22 '18 at 2:14
change
this.props.gradeSelection to props.gradeSelection– Randy Casburn
Nov 22 '18 at 2:14
add a comment |
3 Answers
3
active
oldest
votes
Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?
function SubjectCards(props) {
let display
console.log('subjectCards.js: ' + props.gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => (
<Subject {...props} gradeSelection={props.gradeSelection} />
)}
/>
)
return display
}
What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.
There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.log('subjectCards.js: ' + gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => <Subject {...props} gradeSelection={gradeSelection} />}
/>
)
return display
}
You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math
You can play around with the example here: https://codesandbox.io/s/mo9jook5y
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
add a comment |
As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.
Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.
answered Nov 22 '18 at 2:40
MikeMike
351413
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />The props being passed to theSubjectcomponent is the props defined in the function call, not the props passed to subjectCard.js.
– Mike
Nov 22 '18 at 3:10
add a comment |
You may use like:
//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other}
gradeSelection={gradeSelection}/>}
//Subject.js
console.log(props.gradeSelection)
But wait, you can just simply pass the props, it has all you need (including gradeSelection):
//subjectCards.js
render={(props) => <Subject {...props} />}
//Subject.js
console.log(props.gradeSelection)
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
add a 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%2f53422935%2freact-passing-a-prop-to-components-return-undefined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?
function SubjectCards(props) {
let display
console.log('subjectCards.js: ' + props.gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => (
<Subject {...props} gradeSelection={props.gradeSelection} />
)}
/>
)
return display
}
What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.
There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.log('subjectCards.js: ' + gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => <Subject {...props} gradeSelection={gradeSelection} />}
/>
)
return display
}
You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math
You can play around with the example here: https://codesandbox.io/s/mo9jook5y
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
add a comment |
Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?
function SubjectCards(props) {
let display
console.log('subjectCards.js: ' + props.gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => (
<Subject {...props} gradeSelection={props.gradeSelection} />
)}
/>
)
return display
}
What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.
There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.log('subjectCards.js: ' + gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => <Subject {...props} gradeSelection={gradeSelection} />}
/>
)
return display
}
You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math
You can play around with the example here: https://codesandbox.io/s/mo9jook5y
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
add a comment |
Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?
function SubjectCards(props) {
let display
console.log('subjectCards.js: ' + props.gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => (
<Subject {...props} gradeSelection={props.gradeSelection} />
)}
/>
)
return display
}
What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.
There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.log('subjectCards.js: ' + gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => <Subject {...props} gradeSelection={gradeSelection} />}
/>
)
return display
}
You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math
You can play around with the example here: https://codesandbox.io/s/mo9jook5y
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?
function SubjectCards(props) {
let display
console.log('subjectCards.js: ' + props.gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => (
<Subject {...props} gradeSelection={props.gradeSelection} />
)}
/>
)
return display
}
What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.
There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.log('subjectCards.js: ' + gradeSelection)
display = (
<Route
path="/subjects/:subjectName"
render={props => <Subject {...props} gradeSelection={gradeSelection} />}
/>
)
return display
}
You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math
You can play around with the example here: https://codesandbox.io/s/mo9jook5y
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
edited Nov 22 '18 at 4:19
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
answered Nov 22 '18 at 3:41
Dennis MartinezDennis Martinez
2,99693854
2,99693854
add a comment |
add a comment |
As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.
Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.
answered Nov 22 '18 at 2:40
MikeMike
351413
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />The props being passed to theSubjectcomponent is the props defined in the function call, not the props passed to subjectCard.js.
– Mike
Nov 22 '18 at 3:10
add a comment |
As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.
Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.
answered Nov 22 '18 at 2:40
MikeMike
351413
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />The props being passed to theSubjectcomponent is the props defined in the function call, not the props passed to subjectCard.js.
– Mike
Nov 22 '18 at 3:10
add a comment |
As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.
Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.
answered Nov 22 '18 at 2:40
MikeMike
351413
As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.
Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.
answered Nov 22 '18 at 2:40
MikeMike
351413
answered Nov 22 '18 at 2:40
MikeMike
351413
answered Nov 22 '18 at 2:40
MikeMike
351413
answered Nov 22 '18 at 2:40
MikeMike
351413
351413
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />The props being passed to theSubjectcomponent is the props defined in the function call, not the props passed to subjectCard.js.
– Mike
Nov 22 '18 at 3:10
add a comment |
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />The props being passed to theSubjectcomponent is the props defined in the function call, not the props passed to subjectCard.js.
– Mike
Nov 22 '18 at 3:10
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
When console.log(props), gradeSelection is still undefined in there. Would there be any other reason why its undefined?
– KennyS
Nov 22 '18 at 2:51
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} /> The props being passed to the Subject component is the props defined in the function call, not the props passed to subjectCard.js.– Mike
Nov 22 '18 at 3:10
Having read your code a little more carefully, it appears that you are overwriting the variable name "prop" is the function scope in subjectCard:
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} /> The props being passed to the Subject component is the props defined in the function call, not the props passed to subjectCard.js.– Mike
Nov 22 '18 at 3:10
add a comment |
You may use like:
//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other}
gradeSelection={gradeSelection}/>}
//Subject.js
console.log(props.gradeSelection)
But wait, you can just simply pass the props, it has all you need (including gradeSelection):
//subjectCards.js
render={(props) => <Subject {...props} />}
//Subject.js
console.log(props.gradeSelection)
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
add a comment |
You may use like:
//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other}
gradeSelection={gradeSelection}/>}
//Subject.js
console.log(props.gradeSelection)
But wait, you can just simply pass the props, it has all you need (including gradeSelection):
//subjectCards.js
render={(props) => <Subject {...props} />}
//Subject.js
console.log(props.gradeSelection)
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
add a comment |
You may use like:
//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other}
gradeSelection={gradeSelection}/>}
//Subject.js
console.log(props.gradeSelection)
But wait, you can just simply pass the props, it has all you need (including gradeSelection):
//subjectCards.js
render={(props) => <Subject {...props} />}
//Subject.js
console.log(props.gradeSelection)
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
You may use like:
//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other}
gradeSelection={gradeSelection}/>}
//Subject.js
console.log(props.gradeSelection)
But wait, you can just simply pass the props, it has all you need (including gradeSelection):
//subjectCards.js
render={(props) => <Subject {...props} />}
//Subject.js
console.log(props.gradeSelection)
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
edited Nov 22 '18 at 3:37
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
answered Nov 22 '18 at 3:13
Bhojendra RauniyarBhojendra Rauniyar
51.5k2079127
51.5k2079127
add a comment |
add a 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.
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%2f53422935%2freact-passing-a-prop-to-components-return-undefined%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
2
did you try to log it inside the
componentDidMountmethod rather than the constructor?– quirimmo
Nov 22 '18 at 2:13
I think this is similar problem stackoverflow.com/questions/41496655/…
– Eric Marcelino
Nov 22 '18 at 2:13
1
change
this.props.gradeSelectiontoprops.gradeSelection– Randy Casburn
Nov 22 '18 at 2:14