title: changes in state array does not change children through props
body: <p>Recently, I have been working with a dynamic control of input text boxes, each with their own id's. However, I noticed that if I stored an array of elements and each element was an object with different variables and such, any change in on of those variables in the object would not alert React to update the children components(which receive the state through props). I am trying to control the input according to the documentation, but am confused as to why changes in the parent's state of a normal non array and non object variable will be recognized by the children as a change in props and yet not for normal state arrays. Here is my parent code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import Music from './music'
  import axios from 'axios';
  import update from 'immutability-helper';
  
  class Selection {
      constructor(){
          this.music = '';
          this.beginning = '';
          this.the_end = '';
      }
      setTitle=(title)=&gt;{
          this.music = title;
      }
      setStart=(start)=&gt;{
          this.beginning = start;
      }
      setEnd=(end)=&gt;{
          this.the_end = end;
      }
  }
  
  class Practice extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              selections: Array(0),
              test: 0,
          }
          this.removeSong = this.removeSong.bind(this);
      }
      removeSong(index){
          var newArray = this.state.selections.slice();
          newArray.splice(index, 1);
          this.setState({selections: newArray, test: this.state.test+=1});
  
      }
      addAnotherSong=()=&gt;{
          var newArray = this.state.selections.slice();
          newArray.push(new Selection());
          this.setState({ selections: newArray, test: this.state.test+=1});
  
      }
  
      render(){
  
          return(
              &lt;div&gt;
                  &lt;button onClick={() =&gt; this.props.practice()}&gt;Log Practice Session&lt;/button&gt;
                  &lt;h1&gt;{this.props.time}&lt;/h1&gt;
                  &lt;form &gt;
                          Description: &lt;input type="form" placeholder="How did it go?" name="fname"/&gt;&lt;br/&gt;
                  &lt;/form&gt;
                  &lt;button onClick={()=&gt;this.addAnotherSong()}&gt;Add Another Piece&lt;/button&gt;
                  &lt;button onClick={()=&gt;this.setState({test: this.state.test})}&gt;Will it now Update?&lt;/button&gt;
                  {
                      this.state.selections.map((child, index) =&gt; (
                              this.state.selections[index].music,
                              &lt;Music key={index} number={index} subtract={this.removeSong}
                              Title={this.state.test} Start={this.state.selections[index].beginning}
                              End={this.state.selections[index].the_end} changeTitle={this.state.selections[index].setTitle}
                              changeStart={this.state.selections[index].setStart} changeEnd={this.state.selections[index].setEnd}
                              /&gt;
  
                      ))
                  }
              &lt;/div&gt;
  
          );
      }
  }
  
  export default Practice;
  </code></pre>
  
  <p>As you can see, I have an array in the state with objects constructed from the Selection class. Here are the children that won't update unless the change happens in the non array type "this.state.test" prop.</p>
  
  <pre><code>import React, {Component} from 'react';
  import InputBox from './input';
  class Music extends React.Component{
      constructor(props){
          super(props);
      }
      shouldComponentUpdate(newProps){
          if(this.props !== newProps){
              return true;
          } else{
              console.log("wassup");
              return false;
          }
      }
      render(){
          return(
          &lt;div&gt;{this.props.number}
              &lt;InputBox cValue={this.props.Title} identity={this.props.number} updateInput={this.props.changeTitle} /&gt;
              &lt;InputBox cValue={this.props.Start} identity={this.props.number} updateInput={this.props.changeStart} /&gt;
              &lt;InputBox cValue={this.props.End} identity={this.props.number} updateInput={this.props.changeEnd} /&gt;
              &lt;button onClick={()=&gt; this.props.subtract(this.props.number)}&gt;DELETE{this.props.number}&lt;/button&gt;
              {this.props.Title}
          &lt;/div&gt;
          )
      }
  }
  export default Music;
  </code></pre>
  
  <p>Lastly, here is the children of that child.</p>
  
  <pre><code>import React,{Component} from 'react';
  
  class InputBox extends React.Component{
      constructor(props){
          super(props);
          this.state = { value: '' }
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange(event){
          this.setState({value: event.target.value});
          this.props.updateInput(this.state.value, this.props.identity);
          console.log("test" + this.props.cValue);
      }
      shouldComponentUpdate(newProps){
          if(this.props !== newProps){
              console.log("Updating Input Component");
              return true;
          } else {
              console.log("yo");
              return false;
  
          }
      }
      render(){
  
          return(
              &lt;input type="text"onChange={this.handleChange} value={this.props.cValue}/&gt;
          )
      }
  }
  export default InputBox;
  </code></pre>
  
  <p>If this is a bad question, please let me know. But, any help is always appreciated. Thankyou</p>