title: Adding a product component to basket with react hooks
body: <p>The click on the button of any product card must add a component &quot;AddedProduct&quot; into the component &quot;Basket&quot;. Depending on chosen product, the component &quot;AddedProduct&quot; must take the right data about product from the array of objects &quot;productsDataArray&quot;. I've tried such approach: initial state of basket content is empty array. The changing state must contain the component &quot;AddedProduct&quot; with the right data.  But my code dosn't add the component. I'm just studying reactjs, so I can't understand how to write correctly the function &quot;clickBtn&quot; for adding products to basket. Help me, please. (the code is without 'imports' here):</p>
  <pre><code> export const MainPage = props =&gt; {                 {/* parent component with product cards*/} 
       const [basketContent, changeBasketContent] = useState([]);  
  
       const updateContent = (product) =&gt; {
           const addedItems = productsDataArray.filter(item =&gt; item.id == 
                   product.id);
                return (
                   &lt;div&gt;                      
                      &lt;AddedProducts productData = {product} /&gt;                                
                   &lt;/div&gt;                                           
                );                   
           changeBasketContent([addedItems]);         
       };
  
       const clickBtn = (e) =&gt; {     
          updateContent(e.target);
       };  
  
             return ( 
               &lt;div&gt; 
                  &lt;div id = 'productSection'&gt; 
                     {productsDataArray.map(item =&gt; {
                       return (
                        &lt;div key = {item.id}&gt;
                           ProductCard productData = {item}
                           clickBtn = {clickBtn}                                        
                         /&gt;             
                        &lt;/div&gt;  
                         );
                       }                 
                    )}
                  &lt;/div&gt;
                  &lt;Basket/&gt;
             &lt;/div&gt; 
          );
       };
  
   export const ProductCard = props =&gt; {     
      const {productData, clickBtn} = props;           
        return (  
            &lt;div id = 'productCard' style = {{width: '300px'}}&gt;
                 &lt;img src = {productData.photo} alt = {productData.name} height 
                       = &quot;200&quot; /&gt;
                 &lt;div&gt;
                    &lt;h6&gt;{productData.name}&lt;/h6&gt;
                    &lt;div&gt;    
                       &lt;p&gt;Price: {productData.price}&lt;/p&gt;
                       &lt;button type = 'button' onClick = {clickBtn}&gt;                               
                              Add to basket
                       &lt;/button&gt;              
                    &lt;/div&gt;                   
                 &lt;/div&gt;
               &lt;/div&gt;        
               
             );
    };        
         
  export const Basket = props =&gt; {        
  const {basketContent} = props;    
      
      return (  
          &lt;section id = 'basket-bloc'&gt;       
              &lt;div id = &quot;basket-main&quot;&gt;        
                   {basketContent}       
              &lt;/div&gt;         
          &lt;/section&gt;
        );
  }; 
  
  export const AddedProduct = props =&gt; {
     const {productData} = props;    
     return (  
       &lt;div id = 'addedProduct'&gt;         
          &lt;div id = 'product-img-small' className = 'basketItem'&gt;
              &lt;img src = {productData.photo} width = '50'
                   alt = {productData.name} /&gt;
          &lt;/div&gt;
           &lt;div id ='product-name' className = 'basketItem'&gt;
              &lt;p&gt;{productData.name}&lt;/p&gt;         
          &lt;/div&gt; 
       &lt;/div&gt; 
       );
   };                                                  
      
   export const productsDataArray = [
     { 
        id : 1.1, 
        name: &quot;Title1&quot;,
        price: &quot;10$&quot;,
        photo: img1     
     },
     { 
       id : 1.2,  
       name: &quot;Title2&quot;,
       price: &quot;20$&quot;,
       photo: img2     
     },
     { 
       id : 1.3,  
       name: &quot;Title3&quot;,
       price: &quot;30$&quot;,
       photo: img3     
     },
     { 
      id : 1.4,   
      name: &quot;Title4&quot;,
      price: &quot;25$&quot;,
      photo: img4    
     }          
  ];                  
              
             
                   
  </code></pre>