title: Ways to fix a child component that is not re-rendering (due to change in data being passed in as props, not state)?
body: <p><strong>Background</strong></p>
  
  <p>I am working on a Meteor app that uses ReactJS as the rendering library.</p>
  
  <p>Currently, I'm having trouble with having a Child component re-render when data has been updated, even though the parent is accessing the updated data &amp; supposedly passing it down to the child.</p>
  
  <p>The Parent component is a Table of Data. The Child component is a Click-to-edit date field.</p>
  
  <p><em>The way it (theoretically) works</em>: Parent component passes the existing data for date into child component as a prop. Child component takes that existing props data, handles it &amp; sets some states using it and then has 2 options:</p>
  
  <ul>
  <li>default: display data</li>
  <li>if user clicks on data field: change to input &amp; allow user to select date (using react-datepicker), changing the state--when user clicks outside of field, triggers a return to display only &amp; saves the updated data from state to database</li>
  </ul>
  
  <p>I am using the child component twice per row in the table, and each time it is used, it needs access to the most current date data from the database. So if it the data is changed in one field, the second field should reflect that change.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The second field <em>is not</em> reflecting changes in the database unless I manually refresh the page and force the child component to render with the new data. The edited field <em>is</em> reflecting the data change, because it's reflecting what's stored in state.</p>
  
  <p>After reading React documentation, I am sure the problem is because the date is coming in as a prop, then being handled as a state--and because the component isn't going to re-render from a prop change.</p>
  
  <p><strong>My Question</strong></p>
  
  <p>What do I do to fix this? </p>
  
  <p>All of the reading I've done of the docs has strongly recommended staying away from things like forceUpdate() and getDerivedStateFromProps(), but as a result I'm not sure how to have data pass through the way that I want it to.</p>
  
  <p>Thoughts?</p>
  
  <p><strong>My Code</strong></p>
  
  <p>I've abbreviated the code a little bit &amp; removed variable names specific to my project, but I can provide more of the actual if it'll help. I think my question is more conceptual than it is straight up debugging.</p>
  
  <p>Parent</p>
  
  <pre><code>ParentComponent () {
      //Date comes as a prop from database subscription
      var date1 = this.props.dates.date1 
      var date2 = this.props.dates.date2
      return(
          &lt;ChildComponent 
              id='handle-date-1'
              selected={[date1, date2]} /&gt;
          &lt;ChildComponent 
              id='handle-date-2'
              selected={[date1, date2]} /&gt;
      )
  }
  </code></pre>
  
  <p>Child</p>
  
  <pre><code>ChildComponent() {
      constructor(props) {
          super(props);
          this.state = {
              date1: this.props.selected[0],
              date2: this.props.selected[1],
              field: false,
          };
      }
  
      handleDatePick() {
          //Handles the event listeners for clicks in/out of the div, handles calling Meteor to update database.
      }
      renderDate1() {
          return(
              &lt;div&gt;
                  {this.state.field == false &amp;&amp;
                      &lt;p onClick={this.handleClick}&gt;{formatDate(this.state.date1)}&lt;/p&gt;}
                  {this.state.field == true &amp;&amp;
                      &lt;DatePicker
                          selected={this.state.date1}
                          startDate={this.state.date1}
                          onChange={this.handleDatePick}
                      /&gt;
                  }
              &lt;/div&gt;
          )
      }
      renderDate2() {
          return(
              &lt;div&gt;
                  {this.state.field == false &amp;&amp;
                      &lt;p onClick={this.handleClick}&gt;{formatDate(this.state.date2)}&lt;/p&gt;}
                  {this.state.field == true &amp;&amp;
                      &lt;DatePicker
                          selected={this.state.date2}
                          startDate={this.state.date2}
                          onChange={this.handleDatePick}
                      /&gt;
                  }
              &lt;/div&gt;
          )
      }
      render() {
          return(
              //conditionally calls renderDate1 OR renderDate2
          )
      }
  }
  </code></pre>
  
  <p>(If this code/my explanation is rough, it's because I'm still a fairly beginner/low level developer. I don't have formal training, so I'm learning on the job while working on a pretty difficult app. As a solo developer. It's a long story. Please be gentle!)</p>