title: how to update component state when rerendering
body: <p>Hi I am trying to change the state of a component during the render. The state should change the classname depending on the list passed to it as props. I have tried but it does not seem to work. I can pass props but not change the state. </p>
  
  <pre><code>class Square extends React.Component {
      constructor(props) {
          super(props);
          this.state = {alive: true};
          this.handleClick = this.handleClick.bind(this);
      }
      handleClick() {
          this.setState(state =&gt; ({
              alive: !state.alive
          }));
      };
      render() {
          return &lt;div className = { this.state.alive ? "square--green" : "square--grey" } onClick = { this.handleClick } /&gt;;
      };
  }
  
  function SquareList(props) {
      const oxGrid = props.oxGrid;
      const listItems = [];
      oxGrid.forEach((item, i) =&gt; { 
          if(item === 'O'){ 
              listItems.push(&lt;Square key= {i}/&gt;)
          }
          else { 
              listItems.push(&lt;Square key = {i} /&gt;) 
          }
      });
      return listItems;
  };
  
  let printer = (function () {
      let print = function (oXGrid) {
          return ReactDOM.render(&lt;SquareList oxGrid ={oXGrid} /&gt;, grid);
      };
      return { print: print };
  })();
  </code></pre>