Updating state of Sibling/Parent component












0















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>
}









share|improve this question























  • 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
















0















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>
}









share|improve this question























  • 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














0












0








0








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>
}









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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 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

















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












3 Answers
3






active

oldest

votes


















0














What you can do is




  1. Create a React context.

  2. Expose a method to update openPath from context provider (in Sidebar), say (updateOpenPath).

  3. Consume the context by associating updateOpenPath to button clicks






share|improve this answer



















  • 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



















0














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






share|improve this answer
























  • @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



















0














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.






share|improve this answer

























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    What you can do is




    1. Create a React context.

    2. Expose a method to update openPath from context provider (in Sidebar), say (updateOpenPath).

    3. Consume the context by associating updateOpenPath to button clicks






    share|improve this answer



















    • 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
















    0














    What you can do is




    1. Create a React context.

    2. Expose a method to update openPath from context provider (in Sidebar), say (updateOpenPath).

    3. Consume the context by associating updateOpenPath to button clicks






    share|improve this answer



















    • 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














    0












    0








    0







    What you can do is




    1. Create a React context.

    2. Expose a method to update openPath from context provider (in Sidebar), say (updateOpenPath).

    3. Consume the context by associating updateOpenPath to button clicks






    share|improve this answer













    What you can do is




    1. Create a React context.

    2. Expose a method to update openPath from context provider (in Sidebar), say (updateOpenPath).

    3. Consume the context by associating updateOpenPath to button clicks







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 20 '18 at 18:11









    Sung M. KimSung M. Kim

    17.7k33111163




    17.7k33111163








    • 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





      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













    0














    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






    share|improve this answer
























    • @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
















    0














    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






    share|improve this answer
























    • @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














    0












    0








    0







    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






    share|improve this answer













    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







    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • @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











    0














    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.






    share|improve this answer






























      0














      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.






      share|improve this answer




























        0












        0








        0







        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.






        share|improve this answer















        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.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 20 '18 at 17:32

























        answered Nov 20 '18 at 17:26









        Riley Steele ParsonsRiley Steele Parsons

        23016




        23016






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)