Loop over an array in array in React

Question

In my React app (really basic at the moment) I have an array inside another array and I want to loop over all this content. So far my code is:

 {recipes.map((recipe) => (
            <Recipe
                key={recipe.uid}
                title={recipe.data.title?.[0]?.text || null}
                description={recipe.data.intro?.[0]?.text || null}
                image={recipe.data.featured_image.url || null}
                imageAlt={recipe.data.featured_image.alt || null}
                aventuraTitle={recipe.data.tipo_aventura[0].tipo_titulo?.[0]?.text || null}
            />
        ))}

In this code I want aventuraTitle show all the tipo_titulo?.[0]?.text that exist.

As you can imagine this show only the first title.

My console log is:

I don't know what is the best way to loop over this array in React. Could you please advise me? If you need any extra information, please let me know.

Rakesh K · Accepted Answer · 2021-08-29 10:53:23Z

1

Try this:

 {recipes.map((recipe) => (
            <Recipe
                key={recipe.uid}
                title={recipe.data.title?.[0]?.text || null}
                description={recipe.data.intro?.[0]?.text || null}
                image={recipe.data.featured_image.url || null}
                imageAlt={recipe.data.featured_image.alt || null}
                aventuraTitles={recipe.data.tipo_aventura}
            />
        ))}

Then in the Recipe component receive aventuraTitles as a prop which will be having an array.

You can use map on that the same way you did with the Recipe component.

answered Aug 29, 2021 at 10:53

Rakesh K

1,3301 gold badge18 silver badges44 bronze badges

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

2 Comments

Rolanda Over a year ago

Thank you for your help I'm getting the error below: Error: Objects are not valid as a React child (found: object with keys {tipo_imagen, tipo_titulo, tipo_enlace}). If you meant to render a collection of children, use an array instead.

Rakesh K Over a year ago

Okay you have one more nested array. Then you can have one more nested map inside of one map.

Kavindu Vindika · Accepted Answer · 2021-08-29 10:57:21Z

0

Inside <Recipe/> component you need to map tipo_titulo array to view all the texts you need to view and pass aventuraTitle={recipe.data.tipo_aventura[0].tipo_titulo || null} to your <Receipe/> component as a prop.

answered Aug 29, 2021 at 10:57

Kavindu Vindika

2,7972 gold badges16 silver badges22 bronze badges

Comments

Kevin Smith · Accepted Answer · 2021-08-29 10:58:29Z

0

You can do another map to just get the text strings and pass them down as another prop:

 {recipes.map((recipe) => (
            <Recipe
                key={recipe.uid}
                title={recipe.data.title?.[0]?.text || null}
                description={recipe.data.intro?.[0]?.text || null}
                image={recipe.data.featured_image.url || null}
                imageAlt={recipe.data.featured_image.alt || null}
                aventuraTitle={recipe.data.tipo_aventura[0].tipo_titulo?.map(x => x?.text || null)}
            />
        ))}

You can also pull this up to be a variable too to reduce the code a bit

 {recipes.map((recipe) => {

const tipo_titulo = recipe.data.tipo_aventura[0].tipo_titulo?.map(x => x?.text || null);

return (
            <Recipe
                key={recipe.uid}
                title={recipe.data.title?.[0]?.text || null}
                description={recipe.data.intro?.[0]?.text || null}
                image={recipe.data.featured_image.url || null}
                imageAlt={recipe.data.featured_image.alt || null}
                aventuraTitle={tipo_titulo }
            />
        )}
)}

answered Aug 29, 2021 at 10:58

Kevin Smith

14.5k5 gold badges63 silver badges88 bronze badges

2 Comments

Rolanda Over a year ago

Thanks! That show me only the first tipo_titulo. Any idea why?

Kevin Smith Over a year ago

Do you need to iterate over tipo_aventura as well?

Collectives™ on Stack Overflow

Loop over an array in array in React

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related