title: React setState renders component twice when called
body: <p>I'm trying to build a connect 4 game, which has a Board component comprised of 7 Column components all contain 6 Space components. Every Column has a Drop button above it, which will be used to drop the piece into the column. In order to alternate between "red" and "black" players, I have created a state "redOrBlue" which returns a boolean. </p>
  
  <p>In a nutshell, when the Drop button is clicked, I want to toggle the value of "redOrBlue" to keep track of whose turn it is. I've set the onClick function to setState({redOrBlue: !this.state.redOrBlue)}, however, calling this function will cause react to render an extra column right below the column in which the button was clicked. I understand that setState automatically re-renders the DOM, but how can I keep from it rendering duplicates of a component? Thanks for your help!</p>
  
  <pre><code>class Column extends Component{
    constructor(){
      super();
      this.state = {
        myArray: [],
        buttonArray: [],
        buttonNumber: null,
        newArray: [],
        redOrBlue: true
      }
    }
    makeRow(){
      var component = &lt;Space className="space"/&gt;
      for(var i = 0; i &lt; 6; i++){
        this.state.myArray.push(component);
      }
    }
  
    handleClick(){
      var num = this.props.colNumber;
      var array = this.props.boardArray[num];
      var boolean = false;
      var color;
      if(this.state.redOrBlue === true){
        color = "red"
      }else{
        color = "black"
      }
      for(var i = 5; i &gt; -1; i--){
        if(boolean === false){
          if(array[i] === null){
            array[i] = color;
            boolean = true;
          }
        }
      }
      this.setState({redOrBlue: !this.state.redOrBlue})
      console.log(array)
    }
  
    render(){
      {this.makeRow()}
      return(
        &lt;div className="column"&gt;
          &lt;DropButton onClick={() =&gt; this.handleClick()} id={'button-' + this.props.colNumber} buttonNumber={this.props.colNumber} className={this.props.className}/&gt;
          {this.state.myArray.map(function(component, key){
            return component
          })}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>