title: Correctly push to an array that has been passed as props
body: <h2>I Defined an array.</h2>
  
  <p>Then passed the array to the Console child as props.<br><br>
  <code>main.js</code></p>
  
  <pre><code>class Main extends Component {
    constructor() {
      super();
      this.moduleArray = [];
      this.state = {
        moduleArray: this.moduleArray
      };
    }
    render() {
      return (
        &lt;div id="builder-root"&gt;
          &lt;Console moduleArray={this.moduleArray} /&gt;
        &lt;/div&gt;
      );
    }
  }
  }
  export default Main;
  </code></pre>
  
  <p><br></p>
  
  <h2>I assigned the array to a <code>const</code></h2>
  
  <p>Then onClick I am passing a parameter to the <code>append</code> function which runs a switch statement. Then I push the content of the matching case to the array. <br><br>
  <code>console.js</code></p>
  
  <pre><code>class Console extends React.Component {
    render() {
      const { moduleArray } = this.props;
      const append = x =&gt; e =&gt; {
        switch (x) {
          case 0:
            console.log("case0");
            moduleArray.push(
              &lt;div
                key={moduleArray.length}
                id={moduleArray.length}
                style={{ fontSize: 0, lineHeight: 0 }}
              &gt;
                &lt;Mod1 /&gt;
              &lt;/div&gt;
            );
            console.log("pushed");
            break;
          //other switch cases
          default:
        }
        this.setState({
          moduleArray: this.moduleArray
        });
      };
      return (
        &lt;div id="console"&gt;
          &lt;input onClick={append(0)} value="Single col" type="submit" /&gt;
          //other clicks passing parameters
        &lt;/div&gt;
      );
    }
  }
  export default Console;
  </code></pre>
  
  <p>And..... nothing happens. Well I say nothing. The function runs and prints the console logs out and I don't get an error. But the content doesn't render.</p>
  
  <p>I think I need to use the <code>spread</code> operator in some way but I am unsure and struggling to find any reading material on a scenario like this. </p>