title: Rendering an array of components with seperate states in React
body: <p>Okay! So questions similar to this have already been asked but the problem is that they don't solve my exact problem so please read the full question and consider looking at the code snippet pasted below before marking it as duplicate. So I have an array of objects <code>menuItems</code> which holds the props for another component <code>MenuItem</code>, and I'm trying to render that component <code>MenuItem</code> multiple times by iterating through that array &quot;<code>menuItems</code>&quot; and assigning unique props to it and then pushing it to another array called <code>items</code> and when this is done I'm placing this <code>items</code> array inside the return but somehow react is not rendering that array at all.</p>
  <pre><code>function Menu() {
  
      let items = [];
  
      const menuItems = [
          {
              imageName:'food-header-2.jpg',
              itemTitle:'Full breakfast for morning',
              itemPunchLine:'Some punchline',
              quantity:0,
          },
          {
              imageName:'pizza.jpg',
              itemTitle:'Cheeze pizza',
              itemPunchLine:'Some punchline',
              quantity:0,
          },
          {
              imageName:'burger.jpg',
              itemTitle:'Jumbo Burger',
              itemPunchLine:&quot;Some punchline&quot;,
              quantity:0,
          },
          {
              imageName:'sandwich.jpg',
              itemTitle:'Veg SandWich',
              itemPunchLine:'Some punchline',
              quantity:0,
          },
          {
              imageName:'chocolate-shake.jpg',
              itemTitle:'Chocolate Shake',
              itemPunchLine:'Some punchline',
              quantity:0,
          },
      ]
  
      const useEffect(() =&gt; {
  
          menuItems.forEach((menuItem,index) =&gt; {
              items.push(
              &lt;MenuItem key={index} title={menuItem.itemTitle} punchLine={menuItem.itemPunchLine} 
              quantity={menuItem.quantity} imageName={menuItem.imageName}
              /&gt;);
          }));
  
          
      };
      return(
          &lt;div className=&quot;container&quot;&gt;
              &lt;div className=&quot;menu-holder&quot;&gt;
                  &lt;div className=&quot;menu&quot;&gt;
                      {items}                 
                  &lt;/div&gt;
              &lt;/div&gt;            
          &lt;/div&gt;
      )
  }
  </code></pre>