title: React Js: Set input value from sibling component
body: <p>I am learning <code>ReactJS</code> and trying to develop small <code>CRUD</code> form using it. At this point, I am trying to set <code>input values</code> from other <code>sibling component</code> to perform update. <img src="https://i.stack.imgur.com/4QmPd.png" alt="enter image description here"></p>
  
  <p>So, if I <code>click</code> on <code>edit button in first row</code> on grid, <code>Organzation Name</code> and <code>Description</code> input boxes should  get <code>"abc com"</code> and <code>"company Abc"</code> values respectively.</p>
  
  <pre><code>var OrganizationHandler = React.createClass(
      render: function() {
          return (
              &lt;div&gt;
                  &lt;OrganizationAPP onOrganizationSubmit=this.handleOrganizationSubmit} /&gt;
                  &lt;OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  /&gt;
              &lt;/div&gt;
         );
      }
  });
  
  var OrganizationList = React.createClass({
      internal_DeleteOrganization: function(id) {
          this.props.external_DeleteOrganization(id);
      },
      render: function() {
          var results = this.props.data;
          var parsed_results = results.objects;
          var that = this;
          var organizations = parsed_results.map(function(organization){
              return &lt;Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} /&gt;
          });
  
          return(
              &lt;div&gt;
                  {organizations}
              &lt;/div&gt;
          );
      }
  });
  
  var Organization = React.createClass({
      handleDeleteClick: function() {
          console.log(this.props);
          this.props.onDeleteOrganization(this.props.id);
      },
      handleEditClick: function () {
          alert(this.props.name);
      },
      render: function() {
          return (
              &lt;div className="row"&gt;
                  &lt;div className="small-2 large-2 columns"&gt;{this.props.id}&lt;/div&gt;
                  &lt;div className="small-4 large-4 columns"&gt;{this.props.name}&lt;/div&gt;
                  &lt;div className="small-4 large-4 columns"&gt; this.props.description}&lt;/div&gt;
                  &lt;div className="small-2 large-2 columns"&gt;
                      &lt;input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" /&gt;
                      &lt;input type="button" onClick={this.handleEditClick} data-order={this.props.id} value="Edit" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var OrganizationAPP= React.createClass({
      getInitialState: function() {
          return {name: '',  description:''};
      },
      onChangename: function(e) {
          this.setState({name: e.target.value});
      },
      onChangedescription: function(e) {
          this.setState({description: e.target.value});
      },
      handleSubmit: function() {
          var name = this.refs.name.getDOMNode().value.trim();
          var description = this.refs.description.getDOMNode().value.trim();
          if (!description || !name) {
              return false;
          }
  
          this.props.onOrganizationSubmit('{"name":"' + name +'", "description": "' + description +'"}');
          this.refs.name.getDOMNode().value = '';
          this.refs.name.getDOMNode().value = '';
          this.setState({name: '', description: ''});
          return false;
      },
      render: function() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;Organization Setup:&lt;/h1&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="small-12 large-3 columns"&gt;
                              &lt;label&gt;Organization Name:&lt;/label&gt;
                              &lt;input type="text" ref="name" required value={this.props.name} onChange={this.onChangename}/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="small-12 large-7 columns"&gt;
                              &lt;label&gt;description:&lt;/label&gt;
                              &lt;input type="text" required ref="description" value={this.props.description} onChange={this.onChangedescription}  /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div className="row"&gt;
                          &lt;div className="small-2 large-3  columns"&gt;
                              &lt;button type="submit"&gt; Add &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  });
  </code></pre>
  
  <p>I have successfully performed <code>addition</code> and <code>deletion</code> operations but I don't know how can I set values to be edit in input boxes from sibling component. Please let me know if you don't understand anything as I just started learning <code>reactjs</code> and I know my code is not up to the mark. </p>