How does parent changes child state and child changes parent state in react
Say in the current project, we don't have redux set up.
we have these components in hierarchy:
- p1
-- p2
--- p3
---- p4
----- c1
I want p3 component to change c1's states and c1 changes p3's states.
Is there an easy way to achieve this?
reactjs
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
add a comment |
Say in the current project, we don't have redux set up.
we have these components in hierarchy:
- p1
-- p2
--- p3
---- p4
----- c1
I want p3 component to change c1's states and c1 changes p3's states.
Is there an easy way to achieve this?
reactjs
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34
add a comment |
Say in the current project, we don't have redux set up.
we have these components in hierarchy:
- p1
-- p2
--- p3
---- p4
----- c1
I want p3 component to change c1's states and c1 changes p3's states.
Is there an easy way to achieve this?
reactjs
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
Say in the current project, we don't have redux set up.
we have these components in hierarchy:
- p1
-- p2
--- p3
---- p4
----- c1
I want p3 component to change c1's states and c1 changes p3's states.
Is there an easy way to achieve this?
reactjs
reactjs
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
asked Nov 19 '18 at 4:19
kenpeterkenpeter
1,43462338
1,43462338
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34
add a comment |
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34
add a comment |
1 Answer
1
active
oldest
votes
Changing C1's state from P3:
The p3 component can change c1's state by changing the props it passes down to p4 which must change the props it passes down to c1. In c1 you will detect the prop change via componentWillReceiveProps and in this function set your new c1 state from the props that were passed down all the way from p3:
// in c1
componentWillReceiveProps(newProps) {
this.setState({ someC1Data: newProps.someP3Data });
}
Changing P3's state from C1:
This can be accomplished through the use of callbacks. The props of c1 will be a callback, say changeParent3State(someC1Data), so in c1 you would call this.props.changeParent3State(someC1Data) whenever you wanted to change p3's state. You would have the same function callback in p4 such that p4 receives c1's function call and p4 makes the same call up the parent tree to p3 via this.props.changeParent3State(someC1Data) again. The p3 component has now received c1's data and in the function implementation can change its state based on the c1's data, if any data was given:
// in p3
changeParent3State(someC1Data) {
this.setState({ someP3Data: someC1Data});
}
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
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%2f53368262%2fhow-does-parent-changes-child-state-and-child-changes-parent-state-in-react%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
Changing C1's state from P3:
The p3 component can change c1's state by changing the props it passes down to p4 which must change the props it passes down to c1. In c1 you will detect the prop change via componentWillReceiveProps and in this function set your new c1 state from the props that were passed down all the way from p3:
// in c1
componentWillReceiveProps(newProps) {
this.setState({ someC1Data: newProps.someP3Data });
}
Changing P3's state from C1:
This can be accomplished through the use of callbacks. The props of c1 will be a callback, say changeParent3State(someC1Data), so in c1 you would call this.props.changeParent3State(someC1Data) whenever you wanted to change p3's state. You would have the same function callback in p4 such that p4 receives c1's function call and p4 makes the same call up the parent tree to p3 via this.props.changeParent3State(someC1Data) again. The p3 component has now received c1's data and in the function implementation can change its state based on the c1's data, if any data was given:
// in p3
changeParent3State(someC1Data) {
this.setState({ someP3Data: someC1Data});
}
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
add a comment |
Changing C1's state from P3:
The p3 component can change c1's state by changing the props it passes down to p4 which must change the props it passes down to c1. In c1 you will detect the prop change via componentWillReceiveProps and in this function set your new c1 state from the props that were passed down all the way from p3:
// in c1
componentWillReceiveProps(newProps) {
this.setState({ someC1Data: newProps.someP3Data });
}
Changing P3's state from C1:
This can be accomplished through the use of callbacks. The props of c1 will be a callback, say changeParent3State(someC1Data), so in c1 you would call this.props.changeParent3State(someC1Data) whenever you wanted to change p3's state. You would have the same function callback in p4 such that p4 receives c1's function call and p4 makes the same call up the parent tree to p3 via this.props.changeParent3State(someC1Data) again. The p3 component has now received c1's data and in the function implementation can change its state based on the c1's data, if any data was given:
// in p3
changeParent3State(someC1Data) {
this.setState({ someP3Data: someC1Data});
}
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
add a comment |
Changing C1's state from P3:
The p3 component can change c1's state by changing the props it passes down to p4 which must change the props it passes down to c1. In c1 you will detect the prop change via componentWillReceiveProps and in this function set your new c1 state from the props that were passed down all the way from p3:
// in c1
componentWillReceiveProps(newProps) {
this.setState({ someC1Data: newProps.someP3Data });
}
Changing P3's state from C1:
This can be accomplished through the use of callbacks. The props of c1 will be a callback, say changeParent3State(someC1Data), so in c1 you would call this.props.changeParent3State(someC1Data) whenever you wanted to change p3's state. You would have the same function callback in p4 such that p4 receives c1's function call and p4 makes the same call up the parent tree to p3 via this.props.changeParent3State(someC1Data) again. The p3 component has now received c1's data and in the function implementation can change its state based on the c1's data, if any data was given:
// in p3
changeParent3State(someC1Data) {
this.setState({ someP3Data: someC1Data});
}
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
Changing C1's state from P3:
The p3 component can change c1's state by changing the props it passes down to p4 which must change the props it passes down to c1. In c1 you will detect the prop change via componentWillReceiveProps and in this function set your new c1 state from the props that were passed down all the way from p3:
// in c1
componentWillReceiveProps(newProps) {
this.setState({ someC1Data: newProps.someP3Data });
}
Changing P3's state from C1:
This can be accomplished through the use of callbacks. The props of c1 will be a callback, say changeParent3State(someC1Data), so in c1 you would call this.props.changeParent3State(someC1Data) whenever you wanted to change p3's state. You would have the same function callback in p4 such that p4 receives c1's function call and p4 makes the same call up the parent tree to p3 via this.props.changeParent3State(someC1Data) again. The p3 component has now received c1's data and in the function implementation can change its state based on the c1's data, if any data was given:
// in p3
changeParent3State(someC1Data) {
this.setState({ someP3Data: someC1Data});
}
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
answered Nov 19 '18 at 4:45
Shawn AndrewsShawn Andrews
945617
945617
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%2f53368262%2fhow-does-parent-changes-child-state-and-child-changes-parent-state-in-react%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
possible duplicates of sharing state and accessing child state. Also see react docs about lifting state
– Eric Ren
Nov 19 '18 at 4:26
@Eric Ren ok, so you are saying I need to keep passing function from parent to child component, if it is very deep. Use ref to do the opposite?
– kenpeter
Nov 19 '18 at 4:34