React Props and Reuse

React · 3 minute lesson

Props are the inputs a parent passes to a React component. They let one component display different data without duplicating its markup. A lesson card can receive a title and duration, while its layout stays consistent throughout the site.

Read props from the component function parameter. Destructuring makes individual values convenient to use, and a default value can cover an omitted prop. Insert JavaScript expressions into JSX with curly braces. Quoted text remains a literal string, so choose the syntax that matches the value you intend to pass.

Treat props as read-only inputs. If a child needs to request a change, its parent can provide a callback function. This keeps ownership clear and makes it easier to trace how data moves through the interface. Begin with a small set of explicit props and expand only when the component needs more information.

Try the example

function LessonCard({ title, minutes = 5 }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{minutes} minute lesson</p>
    </article>
  );
}

<LessonCard title="React props" minutes={8} />

Practice

Add a level prop to the card and display it under the title. Render a beginner lesson and an intermediate lesson. Omit minutes for one card and confirm that its default value appears.

Continue learning: Official documentation.