title: Add multiple objects to an array?
body: <p>Every time I click an option of size and click add to cart I would like to add the data of the selected object to this array <code>cart</code>. This currently works kinda but only one object can be added and when you try to do it again the old data disappears and is replaced with the new object. </p>
  
  <p>I would like to keep odd objects in the array and add new objects too. How do I go about doing this?</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>export class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        evenSelected: null
      };
    }
  
    handleSelectL1 = i =&gt; {
      this.setState({
        evenSelected: i,
        oldSelected: null
      });
    };
  
    render() {
      const product = [
        {
          name: " size one",
          price: 1
        },
        {
          name: "size two",
          price: 2
        },
        ,
        {
          name: "size three",
          price: 3
        }
      ];
  
      const cart = [];
  
      const addCart = function() {
        cart.push(product[evenIndex]);
        if (cart.length &gt; 0) {
        }
      };
      console.log("cart", cart);
  
      const evenIndex = this.state.evenSelected;
      const priceShown = product[evenIndex] &amp;&amp; product[evenIndex].price;
      return (
        &lt;div&gt;
          &lt;Child
            product={product}
            handleSelectL1={this.handleSelectL1}
            evenIndex={evenIndex}
          /&gt;
          &lt;h2&gt;Price:{priceShown} &lt;/h2&gt;
          &lt;button onClick={addCart}&gt;Add to cart&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>child.js</strong></p>
  
  <pre><code>export class Child extends Component {
    constructor(props) {
      super(props);
  
      this.state = {};
    }
  
    render() {
      const { product, evenIndex } = this.props;
  
      return (
        &lt;div&gt;
          {product.map((p, i) =&gt; {
            return (
              &lt;div
                key={p.id}
                className={evenIndex === i ? "selectedRBox" : "selectorRBox"}
                onClick={() =&gt; this.props.handleSelectL1(i)}
              &gt;
                &lt;h1 className="selectorTextL"&gt;{p.name}&lt;/h1&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is my code on sandbox: <a href="https://codesandbox.io/s/14vyy31nlj" rel="nofollow noreferrer">https://codesandbox.io/s/14vyy31nlj</a></p>