React Not Re-rendering After A Change In State, How Do I Setstate Of Child Components?

Problem: I have a collection of Legislators put into a table, the field headers are buttons and have click events attached to them that sort the collection by the field button clic

Solution 1:

The state.legislator in your child component is not being updated because the code:

this.state = {
  legislator: props.legislator,
  fields: ["first_name", "last_name", "state", "party"]
}

only runs once as the constructor only runs once, too. And the state.legislator in child component won't automatically update unless you do this.setState() explicitly inside the child component.

However, there is no need to do in such a way you are doing. Maintaining own state for props in the child component is absolutely redundant.

You can directly use this.props inside render method in child component, and when the state changes in the parent component, the child will re-render with new props.

classLegislatorextendsReact.Component {
  constructor(props) {
    super();
    this.state = {
      fields: ["first_name", "last_name", "state", "party"]
    }
  }

  render() {
    const legislatorRow = this.state.fields.map((field) =><LegislatorFieldvalue={this.props.legislator[field] } />
    )
    return (
      <trkey={this.state.legislator.id}>
        { legislatorRow }      
      </tr>
    );
  }
}

As a bonus, if your this.state.fields is always constant -- you don't intend to update it later, you do not have to have it as a state either. You can simply make it a class instance field as this.fields = ["first_name", "last_name", "state", "party"]

Solution 2:

The main problem is that Array.prototype.sort mutates the array and returns it, instead of returning a new array sorted.

a = [4,1,2,3];b = a.sort();a === b // true , they are the same object

So when you "change the state" in handleChange you're actually mutating the state assigning the same object reference, making it difficult to React to tell that you've made any changes at all.

The easy way out would be to use Immutable to store the collection of legislators. Using Immutable.List.sort you will have a new array with the new value, instead of the old array mutated.

Other way out would be to define your component more clearly by having a sortBy property on the state that contains the key to sort the list by, and updating that instead of the whole collection.

constructor

this.state = {
  legislator: props.legislator,
  fields: ["first_name", "last_name", "state", "party"],
  sortBy: 'first_name'
}

handleChange

handleChange( value ) {
  this.setState( { sortBy: value })
}

populateList

populateList() {
  returnthis.state.legislators.map((legislator) =>
    this.renderLegislator(legislator)
  ).sort(function(a, b) {
     a_val = a[this.state.sortBy]
     b_val = b[this.state.sortBy]
     if (a_val < b_val) {
       return -1;
     }
     if (a_val > b_val) {
       return1;
     }
     return0;
   });
}