title: ReactJS Reuse Modal for Add and Edit
body: <p>I have a ReactJS application, I have a page that has a table there is a create button for creating a new record that opens a modal to enter the data. That works fine but I want to reuse that same modal to edit the data as well. The user can select a row and then click edit, but I don't seem to be able to get the data I need. </p>
  
  <p>My Dialog is being included on the page as follows.</p>
  
  <pre><code>render() {
          return (
              &lt;div&gt;
                  &lt;h2&gt;Parameters&lt;/h2&gt;
                  &lt;div className="row"&gt;
                      &lt;ParameterDialog callback={this.fetchFromApi} messageCallback={this.props.messageCallback} open={this.state.modalOpen} openCallback={this.openModal} closeCallback={this.closeModal} selectedParameter={this.state.selectedRow} selectedParameterCallback={this.getSelectedParameter} /&gt;
                      &lt;div className="col-sm-10"&gt;
                          &lt;button type="button" onClick={this.onDelete} className="btn btn-danger pull-right" style={{marginRight: '15px', width: '80px'}}&gt;&lt;span className="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Delete&lt;/button&gt;
                          &lt;button type="button" onClick={this.onEdit} className="btn btn-warning pull-right" style={{marginRight: '15px', width: '80px'}}&gt;&lt;span className="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;BootstrapTable data={this.state.parameters} options={options} pagination selectRow={{mode: 'radio', onSelect: this.onRowSelect}}&gt;
                      &lt;TableHeaderColumn isKey dataField='id'&gt;ID&lt;/TableHeaderColumn&gt;
                      &lt;TableHeaderColumn dataField='groupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterGroups}
                          filter={{type: 'SelectFilter', options: this.props.parentState.parameterGroups}}&gt;Category&lt;/TableHeaderColumn&gt;
                      &lt;TableHeaderColumn dataField='subGroupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.state.subGroups}
                          filter={{type: 'SelectFilter', options: this.state.subGroups}}&gt;Sub Category&lt;/TableHeaderColumn&gt;
                      &lt;TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 500 } }&gt;Parameter&lt;/TableHeaderColumn&gt;
                      &lt;TableHeaderColumn dataField='type' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterTypes}
                                         filter={{type: 'SelectFilter', options: this.props.parentState.parameterTypes}}&gt;Type&lt;/TableHeaderColumn&gt;
                      &lt;TableHeaderColumn dataField='reboot'&gt;Reboot&lt;/TableHeaderColumn&gt;
                  &lt;/BootstrapTable&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>In the Dialog component I am calling trying to fetch the data in componentDidMount problem being it will always be null when the component mounts because user hasn't chosen anything yet.</p>
  
  <pre><code>componentDidMount() {
  
      console.debug("ParameterDialog mounted...");
  
      axios({
          method: 'get',
          url: urlBuilder.buildUrl('/api/groups'),
          data: {},
      }).then(resp =&gt; {
          this.setState({groups: resp.data});
      }).catch(error =&gt; {
          this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
      });
  
      axios({
          method: 'get',
          url: urlBuilder.buildUrl(`/api/groups/2/subgroups`),
          data: {}
      }).then(resp =&gt; {
          this.setState({subGroups: resp.data});
      }).catch(error =&gt; {
          this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
      });
  
      // init the state
      this.setState({typeOptions: ['BOOLEAN', 'STRING', 'INTEGER', 'DECIMAL']});
      this.setState({selectedGroup: 2, parameter: '', description: null, type: 'BOOLEAN', rebootRequired: false});
  
      // if parameterId is present load record from database (Edit mode)
      let parameterId = this.props.selectedParameterCallback();
      if (parameterId) {
          console.debug("Parameter is being edited, loading record");
          this.editMode = true;
          this.loadRecord();
      }
  }
  </code></pre>
  
  <p>The modal open property is being bound to parent, but what I really need to happen is when open changes it checked the selectedParameter value and then makes the decision to call the API or not.</p>
  
  <pre><code>return (
          &lt;div className="col-sm-2"&gt;
              &lt;Button bsStyle="primary" onClick={this.props.openCallback}&gt;Add Parameter&lt;/Button&gt;
              &lt;Modal show={this.props.open} onHide={this.closeCallback}&gt;
                  &lt;Modal.Header&gt;
                      &lt;Modal.Title&gt;Add / Edit Parameter&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  .........
  </code></pre>
  
  <p>However this seems to be in contrast to how ReactJS wants to work , the only thing I can think of is to move all the state into the parent component but that will make it huge and really doesn't seem like good module design. </p>
  
  <p>Is there another way to accomplish this? If I could call a child function from parent that would accomplish what I need to do I think.</p>