React.js - Communicating between sibling components
<p>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.</p>

<p>First, I'll describe the task:</p>

<p>Say I have multiple <code>&lt;select&gt;</code> components that are children of a single parent that passes down the select boxes dynamically, composed from an array. Each box has exactly the same available options in its initial state, but once a user selects a particular option in one box, it must be disabled as an option in all other boxes until it is released. </p>

<p>Here's an example of the same in (silly) code. (I'm using <code>react-select</code> as a shorthand for creating the select boxes.)</p>

<p>In this example, I need to disable (ie, set <code>disabled: true</code>) the options for "It's my favorite" and "It's my least favorite" when a user selects them in one select box (and release them if a user de-selects them).</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var React = require('react');
var Select = require('react-select');



var AnForm = React.createClass({

    render: function(){


        // this.props.fruits is an array passed in that looks like:
        // ['apples', 'bananas', 'cherries','watermelon','oranges']
        var selects = this.props.fruits.map(function(fruit, i) {

            var options = [
                { value: 'first', label: 'It\'s my favorite', disabled: false },
                { value: 'second', label: 'I\'m OK with it', disabled: false },
                { value: 'third', label: 'It\'s my least favorite', disabled: false }
            ];


            return (
                &lt;Child fruit={fruit} key={i} options={options} /&gt;
            );
        });


        return (
            &lt;div id="myFormThingy"&gt;
                {fruitSelects}
            &lt;/div&gt;
        )
    }

});


var AnChild = React.createClass({

    getInitialState: function() {
        return {
            value:'',
            options: this.props.options
        };
    },

    render: function(){

        function changeValue(value){
            this.setState({value:value});
        }


        return (
            &lt;label for={this.props.fruit}&gt;{this.props.fruit}&lt;/label&gt;
            &lt;Select
                name={this.props.fruit}
                value={this.state.value}
                options={this.state.options}
                onChange={changeValue.bind(this)}
                placeholder="Choose one"
            /&gt;
        )
    }
});</code></pre>
</div>
</div>
</p>

<p>Is updating the child options best accomplished by passing data back up to the parent through a callback? Should I use refs to access the child components in that callback? Does a redux reducer help?</p>

<p>I apologize for the general nature of the question, but I'm not finding a lot of direction on how to deal with these sibling-to-sibling component interactions in a unidirectional way.</p>

<p>Thanks for any help.</p>