Take Home Projects - Build a Recipe Box

Tell us what’s happening:

I’m trying to make the Recipe Box using React.js

I have a useState called activeRecipe. The activeRecipe is supposed to match the name of the list item clicked within the left box (Bundt Cake, Mont Blanc Cake etc…).

But instead, the console keeps returning object error {} .

activeRecipe only starts returning the actual recipe on the second click. But on the first click, it returns “undefined”, and makes both the white boxes on the screen disappear

How do I make activeRecipes start returning the recipe on the first click?

Your code so far

Recipe Box (codepen.io)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.52

Challenge: Take Home Projects - Build a Recipe Box

Link to the challenge:

I solved it.

I mapped through the local storage within a component. Then I put the map within an if statement, checking if the recipes id, matches the id of the list item clicked

        {allRecipes.map(recipe => {
          if(recipe.id === activeRecipe){
          return(<ActiveInstructions recipe={recipe} />)
          }
        })}