I had a few questions about the munication between React.js ponents. This is in context to without the use of redux. Here is what my ponent hierarchy looks like.

       App
      /  \
     /    \
    |      |
    ▼      ▼
 Board   Dashboard
   |
   ▼ 
 Cell

Below are a few assumptions/patterns that i use for ponents to municate.

1. If we need to pass messages from a parent ponent to child ponents we do that using props. For example, while creating a Board we pass rows, cols as props.

   <Board rows={5} cols={5} />
   

2. If we need to pass messages from a child ponent to parent ponents we do it by passing a callback. For example we pass a play() callback from Board to Cell. Within Cell, we set the onClick handler to be the passed callback i.e. play().

   <Cell onClick={this.props.play(this.props.id)} />
   

3. The open question i had was how can be pass messages between sibling ponents (example Dashboard to Cell). One use-case is resetting my Board ponent when a reset button within Dashboard ponent is clicked. Here is what reset button within Dashboard looks like. My question is once the reset message reaches App ponent, whats the best practice to pass it down to Board?

   <input type="button" value="reset" onClick={this.props.reset} />
   

Would be great to get some feedback on 1 and 2. Also, the best practice for 3.

I had a few questions about the munication between React.js ponents. This is in context to without the use of redux. Here is what my ponent hierarchy looks like.

       App
      /  \
     /    \
    |      |
    ▼      ▼
 Board   Dashboard
   |
   ▼ 
 Cell

Below are a few assumptions/patterns that i use for ponents to municate.

1. If we need to pass messages from a parent ponent to child ponents we do that using props. For example, while creating a Board we pass rows, cols as props.

   <Board rows={5} cols={5} />
   

2. If we need to pass messages from a child ponent to parent ponents we do it by passing a callback. For example we pass a play() callback from Board to Cell. Within Cell, we set the onClick handler to be the passed callback i.e. play().

   <Cell onClick={this.props.play(this.props.id)} />
   

3. The open question i had was how can be pass messages between sibling ponents (example Dashboard to Cell). One use-case is resetting my Board ponent when a reset button within Dashboard ponent is clicked. Here is what reset button within Dashboard looks like. My question is once the reset message reaches App ponent, whats the best practice to pass it down to Board?

   <input type="button" value="reset" onClick={this.props.reset} />
   

Would be great to get some feedback on 1 and 2. Also, the best practice for 3.

• javascript
• reactjs

Share Improve this question Follow edited Jan 15, 2017 at 18:31 Abdennour TOUMI 93.8k4242 gold badges268268 silver badges269269 bronze badges asked Jan 15, 2017 at 18:11 noi.mnoi.m 3,13266 gold badges3838 silver badges6464 bronze badges 2

• 1 & 2 are the correct way to handle that use cases. As for 3, if the ponents are siblings, you can use a callback from the parent (see andrewhfarmer./ponent-munication/#5-parent-ponent) if they are not siblings, there is a good sign you should move the variable into a shared state managed by redux or other similar state managers. – Giao Cosimato Commented Jan 15, 2017 at 18:26
• @GiaoCosimato i really like that link. Thank you... – noi.m Commented Jan 16, 2017 at 4:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Redux

This is the exact reason why Redux is so cool. If you're using Redux, then all of these ponents have one single thing in mon; they're all reading their values from the application state. The flow that I would use, is as follows:

1. User clicks on the reset button that lives inside the Dashboard Component

2. The function associated with that click does only one thing. Dispatches a "RESET_BOARD" action

3. In the reducer, the RESET_BOARD action resets the state for the board.

4. When the re-render occurs, the board is passed in props, just like before, only empty state is passed into it.

No Redux

If you've got no redux at hand, then the callback approach from the parent is the sensible way to go. If you're maintaining state in the App ponent, the App then resets its state and triggers a re-render manually. This will cause the Board to be re-rendered with different props.

But also , it is restriction ; munication between two ponents is restricted in 3 cases :

1. Parent updates Child :

2. Child updates parent :

3. siblings (Brothers) updates each other (brother)

---

Let's locate your question now.. Your question is about the 3rd case :

The main idea is to make the grand-parent (App) as proxy to transfer munication .

---

               App
               /  \
              /    \
             |      |
             ▼      ▼
          Board   Dashboard
            |
            ▼ 
          Cell

Dashboard.js

reset(event) {
  //.... local calls (concerning Dashboard or its children )
 // then , external calls (concerning outside Dashboard)
 if(this.props.onReset) this.props.onReset(event);
}

<input type="button" value="reset" onClick={this.reset} />

App.js (the 1ˢᵗ grand-parent between [Dashboard, Board>Cell]) :

onDashboardReset(event) {
  this.setState({dashboardIsReset: true})
}

<Dashboard   onReset={this.onDashboardReset} />
<Board   dashboardIsReset={this.state.dashboardIsReset} />

Board.js :

   // ... has props  `dashboardIsReset` and forward it to its children (`Cell`) if needed