ReactJS, passing prop from parent to child component?
I have a bunch of components that require the same prop, and going through them individually to add the JSX is cumbersome, can I create a piece of JSX in the parent that will be passed to these child components as a prop?
Here's basically what I want to do:
function App(props) {
/*not part of the actual code, but I want to
pass this h1 tag into the bottom components as a prop*/
<h1>{props.heading}</h1>
<Home heading="Home"/>
<AboutMe heading="About Me"/>
<Contact heading="Contact"/>
}
I know the code above isn't how you're supposed to do it, but is there a way I can accomplish that functionality?
javascript reactjs react-props
asked Nov 21 at 1:44
00Saad
596
add a comment |
I have a bunch of components that require the same prop, and going through them individually to add the JSX is cumbersome, can I create a piece of JSX in the parent that will be passed to these child components as a prop?
Here's basically what I want to do:
function App(props) {
/*not part of the actual code, but I want to
pass this h1 tag into the bottom components as a prop*/
<h1>{props.heading}</h1>
<Home heading="Home"/>
<AboutMe heading="About Me"/>
<Contact heading="Contact"/>
}
I know the code above isn't how you're supposed to do it, but is there a way I can accomplish that functionality?
javascript reactjs react-props
asked Nov 21 at 1:44
00Saad
596
As in<Home heading={ () => <h1>{props.heading}</h1> }/>?
– Dacre Denny
Nov 21 at 1:50
add a comment |
I have a bunch of components that require the same prop, and going through them individually to add the JSX is cumbersome, can I create a piece of JSX in the parent that will be passed to these child components as a prop?
Here's basically what I want to do:
function App(props) {
/*not part of the actual code, but I want to
pass this h1 tag into the bottom components as a prop*/
<h1>{props.heading}</h1>
<Home heading="Home"/>
<AboutMe heading="About Me"/>
<Contact heading="Contact"/>
}
I know the code above isn't how you're supposed to do it, but is there a way I can accomplish that functionality?
javascript reactjs react-props
asked Nov 21 at 1:44
00Saad
596
I have a bunch of components that require the same prop, and going through them individually to add the JSX is cumbersome, can I create a piece of JSX in the parent that will be passed to these child components as a prop?
Here's basically what I want to do:
function App(props) {
/*not part of the actual code, but I want to
pass this h1 tag into the bottom components as a prop*/
<h1>{props.heading}</h1>
<Home heading="Home"/>
<AboutMe heading="About Me"/>
<Contact heading="Contact"/>
}
I know the code above isn't how you're supposed to do it, but is there a way I can accomplish that functionality?
javascript reactjs react-props
javascript reactjs react-props
asked Nov 21 at 1:44
00Saad
596
asked Nov 21 at 1:44
00Saad
596
asked Nov 21 at 1:44
00Saad
596
asked Nov 21 at 1:44
00Saad
596
asked Nov 21 at 1:44
00Saad
596
596
As in<Home heading={ () => <h1>{props.heading}</h1> }/>?
– Dacre Denny
Nov 21 at 1:50
add a comment |
As in<Home heading={ () => <h1>{props.heading}</h1> }/>?
– Dacre Denny
Nov 21 at 1:50
As in
<Home heading={ () => <h1>{props.heading}</h1> }/> ?– Dacre Denny
Nov 21 at 1:50
As in
<Home heading={ () => <h1>{props.heading}</h1> }/> ?– Dacre Denny
Nov 21 at 1:50
add a comment |
1 Answer
1
active
oldest
votes
Yes, that's possible. Just assign your JSX component to a variable and pass that variable as a prop. You have the right idea.
For example:
var customHeader = <h1>Here's a custom component</h1>
You can also set customHeader to a React component such as: var customHeader = <CustomHeader />
You can pass through <MyComponent header={customHeader}/> and in your render function of MyComponent page, you can simply use {this.props.header} to load your component. This can be repeated for any number of components.
Edit based on comments. In that case, I would wrap the component in a function. For example:
getCustomHeader = (title) => {
return <MyHeader
headerTitle={title}
/>
}
Now, in your render function, you can call getCustomHeader.
render() {
return <div>
<MyComponent1 header={this.getCustomHeader("Title A")} />
<MyComponent2 header={this.getCustomHeader("Title B")} />
</div>
}
answered Nov 21 at 2:14
Kevin Bai
18817
Would I need to add{this.props.header}to every component I need this custom header for?
– 00Saad
Nov 21 at 3:40
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can passcustomHeaderinto more than 1 component. For example you can do<MyComponent header={customHeader} />and<MyComponent2 header={customHeader} />.
– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.ComponentA's header should be "Title A", andComponentB's header should be "Title B" and so forth?
– 00Saad
Nov 22 at 1:29
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
|
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%2f53404189%2freactjs-passing-prop-from-parent-to-child-component%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
Yes, that's possible. Just assign your JSX component to a variable and pass that variable as a prop. You have the right idea.
For example:
var customHeader = <h1>Here's a custom component</h1>
You can also set customHeader to a React component such as: var customHeader = <CustomHeader />
You can pass through <MyComponent header={customHeader}/> and in your render function of MyComponent page, you can simply use {this.props.header} to load your component. This can be repeated for any number of components.
Edit based on comments. In that case, I would wrap the component in a function. For example:
getCustomHeader = (title) => {
return <MyHeader
headerTitle={title}
/>
}
Now, in your render function, you can call getCustomHeader.
render() {
return <div>
<MyComponent1 header={this.getCustomHeader("Title A")} />
<MyComponent2 header={this.getCustomHeader("Title B")} />
</div>
}
answered Nov 21 at 2:14
Kevin Bai
18817
Would I need to add{this.props.header}to every component I need this custom header for?
– 00Saad
Nov 21 at 3:40
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can passcustomHeaderinto more than 1 component. For example you can do<MyComponent header={customHeader} />and<MyComponent2 header={customHeader} />.
– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.ComponentA's header should be "Title A", andComponentB's header should be "Title B" and so forth?
– 00Saad
Nov 22 at 1:29
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
|
show 1 more comment
Yes, that's possible. Just assign your JSX component to a variable and pass that variable as a prop. You have the right idea.
For example:
var customHeader = <h1>Here's a custom component</h1>
You can also set customHeader to a React component such as: var customHeader = <CustomHeader />
You can pass through <MyComponent header={customHeader}/> and in your render function of MyComponent page, you can simply use {this.props.header} to load your component. This can be repeated for any number of components.
Edit based on comments. In that case, I would wrap the component in a function. For example:
getCustomHeader = (title) => {
return <MyHeader
headerTitle={title}
/>
}
Now, in your render function, you can call getCustomHeader.
render() {
return <div>
<MyComponent1 header={this.getCustomHeader("Title A")} />
<MyComponent2 header={this.getCustomHeader("Title B")} />
</div>
}
answered Nov 21 at 2:14
Kevin Bai
18817
Would I need to add{this.props.header}to every component I need this custom header for?
– 00Saad
Nov 21 at 3:40
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can passcustomHeaderinto more than 1 component. For example you can do<MyComponent header={customHeader} />and<MyComponent2 header={customHeader} />.
– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.ComponentA's header should be "Title A", andComponentB's header should be "Title B" and so forth?
– 00Saad
Nov 22 at 1:29
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
|
show 1 more comment
Yes, that's possible. Just assign your JSX component to a variable and pass that variable as a prop. You have the right idea.
For example:
var customHeader = <h1>Here's a custom component</h1>
You can also set customHeader to a React component such as: var customHeader = <CustomHeader />
You can pass through <MyComponent header={customHeader}/> and in your render function of MyComponent page, you can simply use {this.props.header} to load your component. This can be repeated for any number of components.
Edit based on comments. In that case, I would wrap the component in a function. For example:
getCustomHeader = (title) => {
return <MyHeader
headerTitle={title}
/>
}
Now, in your render function, you can call getCustomHeader.
render() {
return <div>
<MyComponent1 header={this.getCustomHeader("Title A")} />
<MyComponent2 header={this.getCustomHeader("Title B")} />
</div>
}
answered Nov 21 at 2:14
Kevin Bai
18817
Yes, that's possible. Just assign your JSX component to a variable and pass that variable as a prop. You have the right idea.
For example:
var customHeader = <h1>Here's a custom component</h1>
You can also set customHeader to a React component such as: var customHeader = <CustomHeader />
You can pass through <MyComponent header={customHeader}/> and in your render function of MyComponent page, you can simply use {this.props.header} to load your component. This can be repeated for any number of components.
Edit based on comments. In that case, I would wrap the component in a function. For example:
getCustomHeader = (title) => {
return <MyHeader
headerTitle={title}
/>
}
Now, in your render function, you can call getCustomHeader.
render() {
return <div>
<MyComponent1 header={this.getCustomHeader("Title A")} />
<MyComponent2 header={this.getCustomHeader("Title B")} />
</div>
}
answered Nov 21 at 2:14
Kevin Bai
18817
edited Nov 22 at 3:06
answered Nov 21 at 2:14
Kevin Bai
18817
answered Nov 21 at 2:14
Kevin Bai
18817
answered Nov 21 at 2:14
Kevin Bai
18817
18817
Would I need to add{this.props.header}to every component I need this custom header for?
– 00Saad
Nov 21 at 3:40
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can passcustomHeaderinto more than 1 component. For example you can do<MyComponent header={customHeader} />and<MyComponent2 header={customHeader} />.
– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.ComponentA's header should be "Title A", andComponentB's header should be "Title B" and so forth?
– 00Saad
Nov 22 at 1:29
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
|
show 1 more comment
Would I need to add{this.props.header}to every component I need this custom header for?
– 00Saad
Nov 21 at 3:40
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can passcustomHeaderinto more than 1 component. For example you can do<MyComponent header={customHeader} />and<MyComponent2 header={customHeader} />.
– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.ComponentA's header should be "Title A", andComponentB's header should be "Title B" and so forth?
– 00Saad
Nov 22 at 1:29
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
Would I need to add
{this.props.header} to every component I need this custom header for?– 00Saad
Nov 21 at 3:40
Would I need to add
{this.props.header} to every component I need this custom header for?– 00Saad
Nov 21 at 3:40
1
1
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can pass
customHeader into more than 1 component. For example you can do <MyComponent header={customHeader} /> and <MyComponent2 header={customHeader} />.– Kevin Bai
Nov 21 at 19:41
Yes. That's pretty much the case but you don't have to make a new variable for each new header (which would defeat the whole point as the edit that you commented). You can pass
customHeader into more than 1 component. For example you can do <MyComponent header={customHeader} /> and <MyComponent2 header={customHeader} />.– Kevin Bai
Nov 21 at 19:41
What about if each header is different for each component.
ComponentA's header should be "Title A", and ComponentB's header should be "Title B" and so forth?– 00Saad
Nov 22 at 1:29
What about if each header is different for each component.
ComponentA's header should be "Title A", and ComponentB's header should be "Title B" and so forth?– 00Saad
Nov 22 at 1:29
1
1
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
See the edit in the answer.
– Kevin Bai
Nov 22 at 3:06
1
1
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
No problem, glad to help!
– Kevin Bai
Nov 22 at 17:30
|
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%2f53404189%2freactjs-passing-prop-from-parent-to-child-component%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
As in
<Home heading={ () => <h1>{props.heading}</h1> }/>?– Dacre Denny
Nov 21 at 1:50