I'm stuck with react recipe list

Hi, I got a problem with React. Obviously, the recipe box challenge gives me a hard time managing cloned element. My components go through a loop but as you can see, the onClick works only on the first child. Is anyone know how to fix that?

I give my pen link.
Box Recipe

The first thing I notice is that the window you are trying to show has the same id for both recipes.
id=windowundefined
One thing I recommend is giving each recipe a recipe_id. This will help a lot when it comes to deleting and adding recipes as well as updating.
Also I would design your data:

recipe_name: "name",
recipe_ingredients: ["ingr1","ingr2", ... ]
recipe_id : 1

Also much easier to reference in future.

1 Like

Thank you for your tip. I wasn’t sure I was on a good path. I’m moving forward with you advice

1 Like

At first ive mistaken the key attribute. But react use it for anothwr purpose so when i fetched the key props it didn’t exist anymore