1 · Structure and rendering · 30 MIN

Components, props and composition

A component describes UI for its current inputs.

Components can be composed like ordinary functions, but React controls when they render. Props are read-only inputs from a parent. This card receives a title and optional children, which lets the parent supply different content without duplicating markup. Rendering should stay pure: do not mutate incoming objects, fetch data or subscribe to events during render. A semantic heading and section give assistive technologies structure as well as giving the page a visual layout.

Render two cards with different content.

Read the example

import type {ReactNode} from 'react';
function Card({title,children}:{title:string;children:ReactNode}) {
  return <section><h2>{title}</h2><div>{children}</div></section>;
}
export default function App() {
  return <main><h1>Study plan</h1><Card title="Today"><p>Practise props and composition.</p></Card></main>;
}

The page has a Study plan heading, a Today card and one practice paragraph.

Your challenge

Add a second reusable card containing a list of prerequisites and keep the page heading hierarchy logical.

Solution cost: O(v) to produce v rendered elements. time · O(v) element descriptions. space

Common trap

Calling a state setter during ordinary rendering can cause repeated renders.

import type {ReactNode} from 'react';
function Card({title,children}:{title:string;children:ReactNode}) {
  return <section><h2>{title}</h2><div>{children}</div></section>;
}
export default function App() {
  return <main><h1>Study plan</h1><Card title="Today"><p>Practise props and composition.</p></Card></main>;
}

Further reading: Official documentation