title: React passing props from const to child component
body: <p>I am a react noob and I need help with a shopping cart I am working on.</p>
  
  <p>I am trying to get button to remove an item from the array of objects I have but don't know how to access it from where it is in the tree.</p>
  
  <p>I mapped over the cartItems variable and got them to display on the page but there is now the case of passing it to another component.</p>
  
  <p>Please be gentle, this is my first post.</p>
  
  <p>Here is the code in App Component:</p>
  
  <pre><code>const cartItems =
  [
   {
  id: 1,
  image: image1,
  description: 'Cotton Tshirt',
  style: 'MS13KT1906',
  color: 'blue',
  size: 'S',
  price: 11.00,
  button: &lt;RemoveButton /&gt;
    },
  {
  image: image3,
  description: 'Print Girls Tee',
  style: 'MS13KT1906',
  color: 'pink',
  size: 'S',
  price: 17.00,
  button: &lt;RemoveButton /&gt;
  },
  {
  image: image2,
  description: 'Flower Pattern Shirt',
  style: 'MS13KT1906',
  color: 'blue',
  size: 'S',
  price: 9.00,
  button: &lt;RemoveButton /&gt;
  },
  {
  image: image4,
  description: 'Check Pattern Shirt',
  style: 'MS13KT1906',
  color: 'red',
  size: 'M',
  price: 22.00,
  button: &lt;RemoveButton /&gt;
   }
  ];
  
  return (
    &lt;div&gt;
   &lt;ItemList         
    cartItems={cartItems.map((item, i) =&gt;
          &lt;ul key={i}&gt;
            &lt;li&gt;
              &lt;img src={item.image} /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              Description: {item.description}
            &lt;/li&gt;
            &lt;li&gt;
              Color: {item.color}
            &lt;/li&gt;
            &lt;li&gt;
              Size: {item.size}
            &lt;/li&gt;
            &lt;li&gt;
              Price: {item.price}
            &lt;/li&gt;
            &lt;li&gt;
              {item.button}
            &lt;/li&gt;
          &lt;/ul&gt;
        )} /&gt;
       &lt;RemoveButton /&gt;
        &lt;/div&gt;
      );
    }
   }
  </code></pre>
  
  <p>and the code in Remove Button Component</p>
  
  <pre><code> onClickRemove(e, item) {
     console.log(e) &lt;-- what do i do here?
   }
  
   render() {
    return(
      &lt;div&gt;
        &lt;button onClick={this.onClickRemove}&gt;
          X Remove
        &lt;/button&gt;
      &lt;/div&gt;
  
      )
     }
    }
  </code></pre>