1 · Get comfortable · 18 MIN

Reuse a component with props

Props pass information from a parent component to a child.

Copying the same markup for every learner makes changes harder. Extract the repeated shape into a LearnerCard component and pass the changing data as props. The parameter {name, topic} reads two named properties from the props object. The parent App chooses the values; the child only reads them. Two cards can share their structure while displaying different data. Props are inputs, so changing them inside the child breaks that direction of data flow.

Find the child function and identify its two inputs. Match each JSX prop to the name shown in the child. Add a new usage below the existing cards. Add level to both the function parameter and every usage.

Before you start

Install Node.js 22.12+ (or a supported newer LTS). In a terminal run: npm create vite@latest codingneed-react -- --template react. Then cd codingneed-react, npm install, and npm run dev. Open the local URL printed by Vite. Replace src/App.jsx with ONE lesson example at a time. JSX renders a browser interface; it is not a plain console script.

File for this example: App.jsx

New words, explained

prop: A named input received by a component.
parent: The component that renders a child.
destructuring: Reading named properties from an object into variables.

Follow the example step by step

Find the child function and identify its two inputs.
Match each JSX prop to the name shown in the child.
Add a new usage below the existing cards.
Add level to both the function parameter and every usage.

You are ready to move on when: Three learner cards appear. Each card displays its own level. Only one LearnerCard function defines the card markup.

Read the example

function LearnerCard({name, topic}) {
  return <article><h2>{name}</h2><p>Learning {topic}</p></article>;
}
export default function App() {
  return <main><h1>Study group</h1>
    <LearnerCard name="Ada" topic="React" />
    <LearnerCard name="Lin" topic="SQL" />
  </main>;
}

Check the expected output

Study group contains two cards: Ada learning React and Lin learning SQL.

Your challenge

Add a third card. Then add a level prop to LearnerCard and display a level for all three learners.

Solution cost: Discuss the operations in this small example; rendering and I/O costs depend on the host. time · Proportional to the example’s retained data. space

Common trap

name="Ada" passes text; name={learnerName} evaluates a variable.

Study the project implementation

function LearnerCard({name, topic}) {
  return <article><h2>{name}</h2><p>Learning {topic}</p></article>;
}
export default function App() {
  return <main><h1>Study group</h1>
    <LearnerCard name="Ada" topic="React" />
    <LearnerCard name="Lin" topic="SQL" />
  </main>;
}

Open guided workshop →See the syllabus