title: Build new array from existing array based on number of component calls
body: <h1>Backstory</h1>
  
  <p><strong>Note: This question is an expansion to the answer <a href="https://stackoverflow.com/users/157247/t-j-crowder">T.J. Crowder</a> provided <a href="https://stackoverflow.com/a/56972678/11718605">here</a>.</strong></p>
  
  <p>I expanded on this by creating a state to hold the rows array so that I could update the array (remove from) using <code>setState</code>.</p>
  
  <p>I added a <code>handleClick</code> function to handle what I would like the user to be able to do to the array based on the index of the element being clicked. (currently all that is included is that right click removes the target index from the array.</p>
  
  <p><code>/rowList.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import Row0 from "./../rows/row0";
  import Row1 from "./../rows/row1";
  import Row2 from "./../rows/row2";
  import Row3 from "./../rows/row3";
  
  const row0 = () =&gt; &lt;Row0 /&gt;;
  const row1 = () =&gt; &lt;Row1 /&gt;;
  const row2 = () =&gt; &lt;Row2 /&gt;;
  const row3 = () =&gt; &lt;Row3 /&gt;;
  class RowInfo {
    static id = 0;
    constructor(Comp) {
      this.Comp = Comp;
      this.id = RowInfo.id++;
    }
  }
  class RowList extends Component {
    constructor() {
      super();
      this.state = {
        rows: [
          new RowInfo(row0),
          new RowInfo(row1),
          new RowInfo(row2),
          new RowInfo(row3)
        ]
      };
    }
    handleClick = (a, b) =&gt; e =&gt; {
      e.preventDefault();
      if (e.nativeEvent.which === 1) {
        //left click
        console.log(a); //for testing
        console.log(b); //for testing
      } else if (e.nativeEvent.which === 3) {
        //right click
        this.setState({
          rows: this.state.rows.filter((_, i) =&gt; i !== a)
        });
      }
    };
  
    render() {
      return (
        &lt;&gt;
          {this.state.rows.map(({ id, Comp }) =&gt; (
            &lt;tr
              key={id}
              onClick={this.handleClick(id)}
              onContextMenu={this.handleClick(id)}
            &gt;
              &lt;Comp /&gt;
            &lt;/tr&gt;
          ))}
        &lt;/&gt;
      );
    }
  }
  export default RowList;
  </code></pre>
  
  <p>I then tested calling the <code>&lt;RowList /&gt;</code> component twice so that I can test removing rows across two components.</p>
  
  <p><strong>Note: Mod0 is imported into a <code>/main.js</code> file which is imported to <code>/index.js</code> which is rendered to <code>&lt;div id="root"&gt;&lt;/div&gt;</code> in <code>index.html</code></strong></p>
  
  <p><code>/mod0.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import RowList from "./../rows/rowList";
  class Mod0 extends Component {
    render() {
      return (
        &lt;&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;RowList /&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;RowList /&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  
  <p><br></p>
  
  <h1>Problem</h1>
  
  <p>When testing the removal I realised a crucial error, the nature of which my current knowledge can only make me relatively certain of so my explanation may be innacurate/flawed. It would seem I can only remove from the first 4 rows that are rendered in <code>&lt;RowList /&gt;</code> as the second 4 rows do not corrospond to the array in <code>this.state.rows</code>. </p>
  
  <p>I think the solution is to build a new array based on the original state array and the amount of times <code>&lt;RowList /&gt;</code> is called. And render that array instead. </p>
  
  <p>Perhaps I could update the state could look something like this to begin with:</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor() {
      super();
      this.state = {
        rows: [
          new RowInfo(row0),
          new RowInfo(row1),
          new RowInfo(row2),
          new RowInfo(row3)
        ],
        rendRows: this.rendRowsTemp
      };
      this.rendRowsTemp = []; //push to build a new array into here?
    }
  </code></pre>
  
  <p>And then use the new array instead like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>  render() {
      return (
        &lt;&gt;
          {this.state.newRows.map(({ id, Comp }) =&gt; (
            &lt;tr
              key={id}
              onClick={this.handleClick(id)}
              onContextMenu={this.handleClick(id)}
            &gt;
              &lt;Comp /&gt;
            &lt;/tr&gt;
          ))}
        &lt;/&gt;
      );
    }
  </code></pre>
  
  <p><br></p>
  
  <h1>Expected Result</h1>
  
  <p>I need a <strong>method</strong> to build the new array based on the original state array and the amount of times <code>&lt;RowList /&gt;</code> is called.</p>