All the Recipes

One card is a start; now the whole book. Show the cards of all the recipes, and in each card, the list of its ingredients:

Tomato Soup
15 minutes
4 ingredients
• tomatoes
• onion
• garlic
• basil

Both are lists made with map(), and both need keys. The recipes have their ids. The ingredients are plain texts without ids, but no ingredient appears twice in one recipe, so each text can be its own key.

A list inside a list is nothing special for React: each RecipeCard maps the ingredients of its own recipe, and App doesn't need to know about them. That's what components are good for: each one takes care of its own part of the page.

When everything's right, the console is empty: no warning about keys.