title: Access Individual Elements in an Array from an API (react)
body: <p>I am a beginner and I am trying to create a recipe app. I managed to set up an API that gives an Array of 10 objects each time I search for a meal like so.</p>
  <p><img src="https://i.stack.imgur.com/w6VYu.png" alt="Text" /></p>
  <p>I access the elements of each recipe using a map</p>
  <pre><code>{recipes.map(recipe =&gt;(
     &lt;RecipeCard 
     key={recipe.recipe.label}
     title ={recipe.recipe.label} 
     calories={recipe.recipe.calories}
     image={recipe.recipe.image}
     ingredients={recipe.recipe.ingredients}
      /&gt;
     ))}
  </code></pre>
  <p>Here is also my Const Recipe Card just for some more context. It functions fine.</p>
  <pre><code>    const RecipeCard = ({title, calories, image, ingredients}) =&gt; {
  
          const round = Math.round(calories);
          
          return(
              &lt;div className = {style.recipe}&gt;
  
                  &lt;h1 &gt;{title}&lt;/h1&gt;
                  &lt;ol className = {style.list}&gt;
                      {ingredients.map(ingredient =&gt; (
                          &lt;li&gt;{ingredient.text}&lt;/li&gt;
                      ))}
                  &lt;/ol&gt;
                  &lt;p&gt;calories: {round} &lt;/p&gt;
                  &lt;img className = {style.image} src={image} alt=&quot;&quot;/&gt;
                  &lt;button&gt;Add to Favorites&lt;/button&gt;
        
              &lt;/div&gt;
          )
      }
  </code></pre>
  <p>I currently only want to access the information from the first array, but whenever I change recipes.map to recipes[0] it says that function does not exist. How should I go about accessing individual elements from the arrays provided from the API?</p>