I had a few questions about the communication between React.js components. This is in context to without the use of redux. Here is what my component hierarchy looks like.
App
/ \
/ \
| |
▼ ▼
Board Dashboard
|
▼
Cell
Below are a few assumptions/patterns that i use for components to communicate.
If we need to pass messages from a parent component to child components we do that using props. For example, while creating a Board we pass rows, cols as props.
<Board rows={5} cols={5} />
If we need to pass messages from a child component to parent components 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)} />
The open question i had was how can be pass messages between sibling components (example Dashboard to Cell). One use-case is resetting my Board component when a reset button within Dashboard component is clicked. Here is what reset button within Dashboard looks like. My question is once the reset message reaches App component, 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.
Redux
This is the exact reason why Redux is so cool. If you're using Redux, then all of these components have one single thing in common; they're all reading their values from the application state. The flow that I would use, is as follows:
User clicks on the reset button that lives inside the Dashboard Component
The function associated with that click does only one thing. Dispatches a "RESET_BOARD" action
In the reducer, the RESET_BOARD action resets the state for the board.
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 component, 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 ; communication between two components is restricted in 3 cases :
Parent updates Child :
Child updates parent :
siblings (Brothers) updates each other (brother)
Let's locate your question now.. Your question is about the 3rd case :
App) as proxy to transfer communication . App
/ \
/ \
| |
▼ ▼
Board Dashboard
|
▼
Cell
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} />
Dashboard, Board>Cell]) :onDashboardReset(event) {
this.setState({dashboardIsReset: true})
}
<Dashboard onReset={this.onDashboardReset} />
<Board dashboardIsReset={this.state.dashboardIsReset} />
// ... has props `dashboardIsReset` and forward it to its children (`Cell`) if needed