title: Editing a rich data structure in React.js
body: <p>I'm trying to create a simple grid-based editor for a data structure and I'm having a couple conceptual problems with React.js. Their documentation is not very helpful on this, so I'm hoping someone here can help. </p>
  
  <p>First, what is the correct way to transfer state from an outer component to an inner component? Is it possible to have state changes in the inner component "bubble up" to the outer component(s)? </p>
  
  <p>Second, can two separate components share data, so that a mutation in one is visible in the other? </p>
  
  <p>Below is a simplified example of the sort of thing I want to do (<a href="http://jsfiddle.net/4p2qF/4/">JSFiddle version</a>):</p>
  
  <p>I have a <code>company</code> object containing an array of <code>employee</code> objects. I want to lay out the <code>employee</code> list in an editable grid. When I click the button, I want to see the resulting <code>company</code> object, along with any mutations (writes to the console).</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var Cell = React.createClass({
      getInitialState: function () {
          return {data: ""};
      },
  
      componentWillMount: function () {
          this.setState({data: this.props.data});
      },
      onChange: function (evt) {
          console.log(this.state, evt.target.value);
          this.setState({data: evt.target.value});
      },
      render: function () {
          var data = this.props.data;
          return &lt;input value={this.state.data} onChange={this.onChange} /&gt;
      }
  });
  
  var Row = React.createClass({
      render: function () {
          return (&lt;div className="row"&gt;
              &lt;Cell data={this.props.data.name} /&gt;
              &lt;Cell data={this.props.data.location} /&gt;
              &lt;Cell data={this.props.data.phone} /&gt;
          &lt;/div&gt;);
      }
  });
  
  var Grid = React.createClass({
      render: function () {
          var rows = this.props.data.map(function (rowData, index) {
              return &lt;Row key={index} data={rowData}&gt;Row&lt;/Row&gt;;
          });
          return &lt;div className="table"&gt;{rows}&lt;/div&gt;;
      }
  });
  
  var Button = React.createClass({
      getInitialState: function () {
          return {data: {}}
      },
      componentWillMount: function () {
          this.setState({data: this.props.data});
      },
      onClick: function () {
          console.log(this.state);
      },
      render: function () {
          return &lt;button onClick={this.onClick}&gt;Update&lt;/button&gt;;
      }
  });
  
  var company = {
      name: "Innotech",
      employees: [
          {id: "1", name: "Peter", location: "IT", phone: "555-1212"},
          {id: "2", name: "Samir", location: "IT", phone: "555-1213"},
          {id: "3", name: "Milton", location: "loading dock", phone: "none"}
      ]
  };
  
  
  React.renderComponent(
      &lt;div&gt;&lt;Grid data={company.employees} /&gt;&lt;Button data={company} /&gt;&lt;/div&gt;,       
      document.getElementById('employees')
  );
  </code></pre>