\n {isLoggedIn ?

Welcome back!

:

Please sign in.

}\n

\n );\n}\n\nexport default UserGreeting;"} 10df:["$10e0"] 10dd:{"type":"codeBlock","attrs":"$10de","content":"$10df"} 10e3:{"type":"text","text":"In this example:"} 10e2:["$10e3"] 10e1:{"type":"paragraph","content":"$10e2"} 10e5:{"tight":true} 10ed:{"type":"code"} 10ec:["$10ed"] 10eb:{"type":"text","marks":"$10ec","text":"isLoggedIn"} 10ee:{"type":"text","text":" is a boolean state that tracks if the user is logged in."} 10ea:["$10eb","$10ee"] 10e9:{"type":"paragraph","content":"$10ea"} 10e8:["$10e9"] 10e7:{"type":"listItem","content":"$10e8"} 10f3:{"type":"text","text":"The ternary operator checks "} 10f6:{"type":"code"} 10f5:["$10f6"] 10f4:{"type":"text","marks":"$10f5","text":"isLoggedIn"} 10f7:{"type":"text","text":". If true, it displays \"Welcome back!\", otherwise, it shows \"Please sign in.\""} 10f2:["$10f3","$10f4","$10f7"] 10f1:{"type":"paragraph","content":"$10f2"} 10f0:["$10f1"] 10ef:{"type":"listItem","content":"$10f0"} 10e6:["$10e7","$10ef"] 10e4:{"type":"bulletList","attrs":"$10e5","content":"$10e6"} 10f8:{"type":"paragraph"} 10fa:{"level":3} 10fc:{"type":"text","text":"Applying Event Handlers and Conditional Rendering to our Recipe Project"} 10fb:["$10fc"] 10f9:{"type":"heading","attrs":"$10fa","content":"$10fb"} 10ff:{"type":"text","text":"Let's update the RecipeDetails component to include buttons for toggling the display of ingredients and steps using conditional rendering."} 10fe:["$10ff"] 10fd:{"type":"paragraph","content":"$10fe"} 1101:{"language":null} 1104:T49c,import React, { useState } from 'react'; import RecipeIngredients from './RecipeIngredients'; import RecipeSteps from './RecipeSteps'; function RecipeDetails() { const [recipeTitle] = useState("Chocolate Cake"); const [recipeDescription] = useState("Delicious deep chocolate cake perfect for celebrations."); const [recipeIngredients] = useState(["2 cups sugar", "1-3/4 cups flour", "3/4 cup cocoa"]); const [recipeSteps] = useState(["Preh

Challenge 3: Creating a Todo List