title: Changing state in a function from a button click does not trigger a rerender in React.js
body: <p>I've got a matrix of cells - small rectangles - in React and a button. On a button click, I want to clear all the cells. First, I create lots of empty cells with some non-empty ones and pass it down a CellGrid component, which renders all the cells just fine. I linked the button onClick to a function, which changes the state (this.state.cells), but it does not trigger a rerender in the child component (CellGrid). </p>
  
  <pre><code>class Playfield extends React.Component {
    constructor(props){
      super(props);
      this.clearButtonClick = this.clearButtonClick.bind(this);
    }
  
    componentWillMount(){
      var arr = [];
      for (var i=0; i &lt; 64*64; ++i){ // all empty cells at first
        arr.push({id:i, status: "empty"}); 
      }
      for (var i=0; i &lt; startCells.length; ++i){ // mark special cells
        var newIndex = startCells[i].x + 64*startCells[i].y;
        arr[newIndex].status = "alive";
      }
      this.setState({ // change state
        cells: arr
      });
    }
  
    clearButtonClick(){
      console.log("clear")
      var newArr = [];
      for (var i=0; i &lt; this.state.cells.length; ++i){ // all empty cells again
        newArr.push({id:i, status: "empty"});
      }
  
      this.setState({ // change state --- NOT UPDATING THE RENDER
        cells: newArr
      });
  
    }
  
    render(){
      return (
        &lt;div className="Playfield"&gt;
          &lt;CellGrid grid_cells={this.state.cells}/&gt;
          &lt;Button onClick={this.clearButtonClick}&gt;CLEAR&lt;/Button&gt;        
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And the CellGrid looks like this. </p>
  
  <pre><code>class CellGrid extends React.Component {
    constructor(props){
      super(props);
      this.renderCells = this.renderCells.bind(this);
    }
  
    renderCells(){
      return (this.props.grid_cells.map(function(cell){
        return (        
          &lt;Cell id={cell.id} status={cell.status}/&gt;);
      }));
    }
  
    render(){
      return (
        &lt;div className="CellGrid"&gt;
          {this.renderCells()}        
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Anyone got a hint? Related questions all changed the state the wrong way. </p>