Project 3: Recipe Page

React Engineer

Builds on these lessons

Step 1 of 3

Project

Adding State with useState

Call const [servings, setServings] = useState(4) inside the component, and display servings in the JSX. useState gives a component memory that survives re-renders — a plain variable would reset to its initial value every time the component re-runs.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useState } from "react";

export default function RecipePage() {
  const [servings, setServings] = useState(4);

  return (
    <div>
      <h1>Margherita Pizza</h1>
      <p>Servings: {servings}</p>
    </div>
  );
}

← Previous Next →