Update child's state from another child of parent

Question

I have a parent that has two children.

ReactDOM.render(
    <div>
        <SaveCart />
        <ImportCart carts={response.items || []}/>
    </div>,
    newContainer
);

SaveCart is only a component and renders only a Button which handles a prompt modal asks a name and save it via xhr request. http://kopy.io/rlzn0

ImportCart is another component that renders only a Button which handles a modal dialog of saved carts, and import them on a Shopping Cart functionality.http://kopy.io/mlK5w

The thing I want is if my saved carts are empty, when a cart is saved via SaveCart component I want to update the carts prop or state in ImportCart.

http://stackoverflow.com/questions/40773676/is-it-possible-to-trigger-contained-components-render-from-within-the-container/40774185#40774185 This answer might help you. — Chaim Friedman, Nov 29 '16 at 15:08

score 3 · Accepted Answer · answered Nov 29 '16 at 15:10

You need to have the items stored in the state of parent and pass them as props to SaveCart and ImportCart.
Whenever user saves an item via SaveCart, pass it through a callback to the parent and let the parent modify its items (and add the new one).
This will trigger a state change and rerender of ImportCart.

Update child's state from another child of parent

1 Answers1