Ways to fix a child component that is not re-rendering (due to change in data being passed in as props, not state)?

ParentComponent () { //Date comes as a prop from database subscription var date1 = this.props.dates.date1 var date2 = this.props.dates.date2 return( <ChildComponent id='handle-date-1' selected={[date1, date2]} /> <ChildComponent id='handle-date-2' selected={[date1, date2]} /> ) }

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( <div> {this.state.field == false && <p onClick={this.handleClick}>{formatDate(this.state.date1)}</p>} {this.state.field == true && <DatePicker selected={this.state.date1} startDate={this.state.date1} onChange={this.handleDatePick} /> } </div> ) } renderDate2() { return( <div> {this.state.field == false && <p onClick={this.handleClick}>{formatDate(this.state.date2)}</p>} {this.state.field == true && <DatePicker selected={this.state.date2} startDate={this.state.date2} onChange={this.handleDatePick} /> } </div> ) } render() { return( //conditionally calls renderDate1 OR renderDate2 ) } }

The React docs have a section on best practice usage of constructor(). Reading that, paying close attention to the yellow-highlighted "Note" section, should illuminate the exact problem you're running into.

Essentially, constructor() is only run once, and is most commonly used to initialize internal/local state (or bind methods). This means that your child component is setting date1 and date2 with the values from your selected prop once when constructor() is called for that child. Whatever the value of selected is at the time constructor() is called will be set to the child's state, and will remain the same even if the value continues to change.

Thus, any successive updates to the selected prop passed to a child component will not be reflected in that component's internal state, meaning there will be no re-render of that component. You'll need to make use of React's setState() method elsewhere in your child component to properly update that child's state and trigger a re-render.

Using a combination of the React lifecycle methods to properly update your child components is the way to go. The snippet below gives you the main idea of what to change about your implementation in componentDidMount() and componentDidUpdate()

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date1: 0,
      date2: 0,
    };
  }

  /*
    Any time the child mounts to the DOM, 
    you can use the method below to set 
    your state using the current value of your 
    selected prop from the parent component...
  */

  componentDidMount() {
    this.setState({
      date1: this.props.selected[0],
      date2: this.props.selected[1]
    });
  }

  /* 
   When the child receives an update from its parent, 
   in this case a new date selection, and should 
   re-render based on that update, use the method below 
   to make a comparison of your selected prop and then 
   call setState again...
  */

  componentDidUpdate(prevProps) {
    if (prevProps.selected !== this.props.selected) {
      this.setState({
        date1: this.props.selected[0],
        date2: this.props.selected[1]
      });
    }
  }

  render() {
    const { date1, date2 } = this.state;
    return (
      <div style={{ border: `4px dotted red`, margin: 8, padding: 4 }}>
        <h1 style={{ fontWeight: 'bold' }}>Child</h1>
        <h2>The value of date1 is {date1}</h2>
        <h2>The value of date2 is {date2}</h2>
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      valOne: 0,
      valTwo: 0
    };
  }

  incrementOne = () => {
    this.setState(prevState => ({ valOne: (prevState.valOne += 1) }));
  };

  incrementTwo = () => {
    this.setState(prevState => ({ valTwo: (prevState.valTwo += 1) }));
  };

  render() {
    const { valOne, valTwo } = this.state;
    return (
      <div style={{ border: `4px solid blue`, margin: 8, padding: 4 }}>
        <h1 style={{ fontWeight: 'bold', fontSize: 18 }}>Parent</h1>
        <button onClick={() => this.incrementOne()}>Increment date1</button>
        <button onClick={() => this.incrementTwo()}>Increment date2</button>
        <Child selected={[valOne, valTwo]} />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.querySelector('#app'));

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Since you're using the React Component pattern for your children, making good use of the React lifecyle methods will really help you out here. I can't suggest strongly enough that you learn the React component lifecyle. As you continue to use React, it will become essential in cases such as this. componentDidMount() and componentDidUpdate() are good places to start.

Hope that this helps. Let us know how it turns out.

Recommended topics

Hot tags