Access Individual Elements in an Array from an API (react)

Question

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.

Text

I access the elements of each recipe using a map

{recipes.map(recipe =>(
   <RecipeCard 
   key={recipe.recipe.label}
   title ={recipe.recipe.label} 
   calories={recipe.recipe.calories}
   image={recipe.recipe.image}
   ingredients={recipe.recipe.ingredients}
    />
   ))}

Here is also my Const Recipe Card just for some more context. It functions fine.

    const RecipeCard = ({title, calories, image, ingredients}) => {

        const round = Math.round(calories);
        
        return(
            <div className = {style.recipe}>

                <h1 >{title}</h1>
                <ol className = {style.list}>
                    {ingredients.map(ingredient => (
                        <li>{ingredient.text}</li>
                    ))}
                </ol>
                <p>calories: {round} </p>
                <img className = {style.image} src={image} alt=""/>
                <button>Add to Favorites</button>
      
            </div>
        )
    }

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?

What do you mean by "the first array"? There is only one array in your example... — Kokodoko
– Kokodoko, Commented Apr 15, 2021 at 21:22

Ajeet Shah · Accepted Answer · 2021-04-15 21:35:23Z

1

You can use .slice(0, 1) to create a shallow copy (a new array with just first element):

{recipes.slice(0, 1).map(recipe =>(
 <RecipeCard 
   key={recipe.recipe.label}
   title ={recipe.recipe.label} 
   calories={recipe.recipe.calories}
   image={recipe.recipe.image}
   ingredients={recipe.recipe.ingredients}
  />
))}

Or use destructuring:

const [recipe] = recipes // before "return"

// ....

<RecipeCard 
   key={recipe.recipe.label}
   title ={recipe.recipe.label} 
   calories={recipe.recipe.calories}
   image={recipe.recipe.image}
   ingredients={recipe.recipe.ingredients}
/>

Or use index:

<RecipeCard 
   key={recipes[0]?.recipe.label}
   title ={recipes[0]?.recipe.label} 
   calories={recipes[0]?.recipe.calories}
   image={recipes[0]?.recipe.image}
   ingredients={recipes[0]?.recipe.ingredients}
/>

The ?. is called optional chaining, you can use it to avoid error like Can't Read property of undefined, i.e. when the first element is undefined and you try to read its properties.

edited Apr 15, 2021 at 21:35

answered Apr 15, 2021 at 21:21

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aroxis Over a year ago

Thank you so much! I had been looking all over google and and youtube and I could not find an answer. I greatly greatly appreciate it.

Collectives™ on Stack Overflow

Access Individual Elements in an Array from an API (react)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related