Updating state of Sibling/Parent component
I have a sidenav that keeps track of what's open through an openPath state. On click of another panel, it collapses the previous and opens the new panel clicked. In my index page body, I want to have buttons that on click update the path to the path of those particular panels on the sidenav. So setting state in my sidenav works perfectly. I just also want to be able to ALSO update this openPath from index Page on click of a button.
So my sidenav is like this
class Sidebar extends React.Component {
constructor(props){
super(props);
const openPath = window.history.state.openPath
this.state = {
openPath: openPath || null
};
}
handleOpen = path => {
this.setState({openPath: path});
};
My sidenav is in my layout component so it's like
LayOut (props) {
<SideNav/>
<Other Components/>
}
And my index page calls the layout component and the layout wraps the buttons. I want to update the sidebar openPath on click of one of these buttons from the Index page component.
Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}
javascript reactjs state
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
add a comment |
I have a sidenav that keeps track of what's open through an openPath state. On click of another panel, it collapses the previous and opens the new panel clicked. In my index page body, I want to have buttons that on click update the path to the path of those particular panels on the sidenav. So setting state in my sidenav works perfectly. I just also want to be able to ALSO update this openPath from index Page on click of a button.
So my sidenav is like this
class Sidebar extends React.Component {
constructor(props){
super(props);
const openPath = window.history.state.openPath
this.state = {
openPath: openPath || null
};
}
handleOpen = path => {
this.setState({openPath: path});
};
My sidenav is in my layout component so it's like
LayOut (props) {
<SideNav/>
<Other Components/>
}
And my index page calls the layout component and the layout wraps the buttons. I want to update the sidebar openPath on click of one of these buttons from the Index page component.
Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}
javascript reactjs state
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
Is using react router an option? Accessing window.history looks like you can use react router to handle routing foropenPath.
– Sung M. Kim
Nov 20 '18 at 17:56
add a comment |
I have a sidenav that keeps track of what's open through an openPath state. On click of another panel, it collapses the previous and opens the new panel clicked. In my index page body, I want to have buttons that on click update the path to the path of those particular panels on the sidenav. So setting state in my sidenav works perfectly. I just also want to be able to ALSO update this openPath from index Page on click of a button.
So my sidenav is like this
class Sidebar extends React.Component {
constructor(props){
super(props);
const openPath = window.history.state.openPath
this.state = {
openPath: openPath || null
};
}
handleOpen = path => {
this.setState({openPath: path});
};
My sidenav is in my layout component so it's like
LayOut (props) {
<SideNav/>
<Other Components/>
}
And my index page calls the layout component and the layout wraps the buttons. I want to update the sidebar openPath on click of one of these buttons from the Index page component.
Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}
javascript reactjs state
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
I have a sidenav that keeps track of what's open through an openPath state. On click of another panel, it collapses the previous and opens the new panel clicked. In my index page body, I want to have buttons that on click update the path to the path of those particular panels on the sidenav. So setting state in my sidenav works perfectly. I just also want to be able to ALSO update this openPath from index Page on click of a button.
So my sidenav is like this
class Sidebar extends React.Component {
constructor(props){
super(props);
const openPath = window.history.state.openPath
this.state = {
openPath: openPath || null
};
}
handleOpen = path => {
this.setState({openPath: path});
};
My sidenav is in my layout component so it's like
LayOut (props) {
<SideNav/>
<Other Components/>
}
And my index page calls the layout component and the layout wraps the buttons. I want to update the sidebar openPath on click of one of these buttons from the Index page component.
Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}
javascript reactjs state
javascript reactjs state
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
asked Nov 20 '18 at 17:24
AnneJodayAnneJoday
246
246
Is using react router an option? Accessing window.history looks like you can use react router to handle routing foropenPath.
– Sung M. Kim
Nov 20 '18 at 17:56
add a comment |
Is using react router an option? Accessing window.history looks like you can use react router to handle routing foropenPath.
– Sung M. Kim
Nov 20 '18 at 17:56
Is using react router an option? Accessing window.history looks like you can use react router to handle routing for
openPath.– Sung M. Kim
Nov 20 '18 at 17:56
Is using react router an option? Accessing window.history looks like you can use react router to handle routing for
openPath.– Sung M. Kim
Nov 20 '18 at 17:56
add a comment |
3 Answers
3
active
oldest
votes
What you can do is
- Create a React context.
- Expose a method to update
openPathfrom context provider (in Sidebar), say (updateOpenPath). - Consume the context by associating
updateOpenPathto button clicks
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
add a comment |
Keep your state in index component and pass down the update handler as a prop. There by every time, when a button is click from side bar even the layout rerenders
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
add a comment |
It looks as though you should be passing data down to child components as props.
In your case, this might require you hoisting the state to the parent component of the SideNav component. Once you do this, siblings can share the same values as props. This is a common paradigm in React development and is described in the official documentation.
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
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%2f53398331%2fupdating-state-of-sibling-parent-component%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
What you can do is
- Create a React context.
- Expose a method to update
openPathfrom context provider (in Sidebar), say (updateOpenPath). - Consume the context by associating
updateOpenPathto button clicks
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
add a comment |
What you can do is
- Create a React context.
- Expose a method to update
openPathfrom context provider (in Sidebar), say (updateOpenPath). - Consume the context by associating
updateOpenPathto button clicks
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
add a comment |
What you can do is
- Create a React context.
- Expose a method to update
openPathfrom context provider (in Sidebar), say (updateOpenPath). - Consume the context by associating
updateOpenPathto button clicks
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
What you can do is
- Create a React context.
- Expose a method to update
openPathfrom context provider (in Sidebar), say (updateOpenPath). - Consume the context by associating
updateOpenPathto button clicks
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
answered Nov 20 '18 at 18:11
Sung M. KimSung M. Kim
17.6k33111161
17.6k33111161
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
add a comment |
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
1
1
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
Thank you! That worked the best for me and I also learnt React Context API now.
– AnneJoday
Nov 21 '18 at 2:54
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
You're welcome. Glad that it helped :)
– Sung M. Kim
Nov 21 '18 at 4:16
add a comment |
Keep your state in index component and pass down the update handler as a prop. There by every time, when a button is click from side bar even the layout rerenders
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
add a comment |
Keep your state in index component and pass down the update handler as a prop. There by every time, when a button is click from side bar even the layout rerenders
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
add a comment |
Keep your state in index component and pass down the update handler as a prop. There by every time, when a button is click from side bar even the layout rerenders
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
Keep your state in index component and pass down the update handler as a prop. There by every time, when a button is click from side bar even the layout rerenders
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
answered Nov 20 '18 at 17:30
klvenkyklvenky
129211
129211
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
add a comment |
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
@AnneJoday you can probably try something like, the layout is the top level component and the side bar is present there, and the routing config in the right pane. I will try to see if I have a working solution for this
– klvenky
Nov 21 '18 at 5:02
add a comment |
It looks as though you should be passing data down to child components as props.
In your case, this might require you hoisting the state to the parent component of the SideNav component. Once you do this, siblings can share the same values as props. This is a common paradigm in React development and is described in the official documentation.
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
add a comment |
It looks as though you should be passing data down to child components as props.
In your case, this might require you hoisting the state to the parent component of the SideNav component. Once you do this, siblings can share the same values as props. This is a common paradigm in React development and is described in the official documentation.
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
add a comment |
It looks as though you should be passing data down to child components as props.
In your case, this might require you hoisting the state to the parent component of the SideNav component. Once you do this, siblings can share the same values as props. This is a common paradigm in React development and is described in the official documentation.
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
It looks as though you should be passing data down to child components as props.
In your case, this might require you hoisting the state to the parent component of the SideNav component. Once you do this, siblings can share the same values as props. This is a common paradigm in React development and is described in the official documentation.
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
edited Nov 20 '18 at 17:32
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
answered Nov 20 '18 at 17:26
Riley Steele ParsonsRiley Steele Parsons
23016
23016
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%2f53398331%2fupdating-state-of-sibling-parent-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
Is using react router an option? Accessing window.history looks like you can use react router to handle routing for
openPath.– Sung M. Kim
Nov 20 '18 at 17:56