title: Changing state before it renders
body: <p>I am having an issue where empty props is being passed from the Parent component to the Child component. I believe it's because I am trying to set the state of my data in a function rather than in a constructor (for Parent component); I only want to set the state of data if the <em>"Display"</em> button is clicked. </p>
  
  <p>How can I change the <strong>this.state.data</strong> to <strong>this.props.data.dataList[rowIndex]</strong> right away when I click "Display" button, and so that it re-renders with the changed state?</p>
  
  <p>I keep getting undefined or a null pointer because my <strong>this.props.data</strong> does not exist in Child component because it renders before the <em>"Display"</em> button is clicked.</p>
  
  <p>I have tried conditional rendering, and if possible I want to try to avoid it.</p>
  
  <pre><code>export class Parent extends React.Component {
      constructor(props) {
          super(props);  
          this.state = {
              data: {}
          };
          this.handleDisplay = this.handleDisplay.bind(this);
      }
  
      columns = [
        {dataField: '..', text: '...',
          formatter: (cell, row, rowIndex) =&gt; {
              return (
                  &lt;div&gt;
                      &lt;Button variant="success" onClick={() =&gt; this.handleDisplay(rowIndex)}&gt;Display&lt;/Button&gt;
                  &lt;/div&gt;
              );
          }
          }, 
        {dataField: '..', text: '...' },  
        {dataField: '..', text: '...' }, 
        {dataField: '..', text: '...'}];
  
      handleDisplay(rowIndex){
              this.setState({
              index: rowIndex,
              data: this.props.data.dataList[rowIndex]
          });
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;BootstrapTable
                      hover
                      condensed={true}
                      bootstrap4={true}
                      keyField={'id'}
                      data={this.props.data.dataList}
                      columns={this.columns}
                  /&gt;
                  &lt;Child data={this.state.data}/&gt;
              &lt;/div&gt;
  
  
          );
  
      }
  
  }
  
  export class Child extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: {}
          };
  
          this.handleInputChange = this.handleInputChange.bind(this);
      }   
  
      componentDidMount(){
          this.setState({
              data: this.props.data
          })
      }
  
      render() {
      return (
      &lt;div&gt;
          &lt;Form.Row&gt;
              &lt;Form.Group as={Col}&gt;
                  &lt;Form.Label&gt;Label Name&lt;/Form.Label&gt;
                  &lt;Form.Control name="labelName" value={this.props.data.labelName}/&gt;
                  .
                  .
                  ..
                  ...
                  ....
              &lt;/Form.Group&gt;
          &lt;/Form.Row&gt;
      &lt;/div&gt;
      )
      }
  }
  </code></pre>