React.js - Communicating between sibling components

Question

I\'m new to React, and I\'d like to ask a strategy question about how best to accomplish a task where data must be communicated between sibling components.

First, I\

Answer 1

The following help me to setup communication between two siblings. The setup is done in their parent during render() and componentDidMount() calls.

class App extends React.Component {
    private _navigationPanel: NavigationPanel;
    private _mapPanel: MapPanel;

    constructor() {
        super();
        this.state = {};
    }

    // `componentDidMount()` is called by ReactJS after `render()`
    componentDidMount() {
        // Pass _mapPanel to _navigationPanel
        // It will allow _navigationPanel to call _mapPanel directly
        this._navigationPanel.setMapPanel(this._mapPanel);
    }

    render() {
        return (
            

                // `ref=` helps to get reference to a child during rendering
                 { this._navigationPanel = child; }} />
                 { this._mapPanel = child; }} />
            
        );
    }
}