Typorithm · easy

Props & Children

react-propsreactpropschildrentypescript

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Props & Children

Components & JSX

Props pass data from a parent to a child and are read-only. You typically destructure them in the parameter list and type them with a TypeScript type. children is the special prop holding nested JSX, and React.ReactNode types anything renderable.

Props are the inputs to a component, passed by the parent and read-only inside the child. Card receives a CardProps object and destructures title and children right in its parameter list.

You type props with a TypeScript type or interface so the compiler catches missing or wrong props. CardProps declares title as a string and children as React.ReactNode.

children is a special prop: it holds whatever JSX the parent nested between the component's tags. Rendering {children} places that content where you want it inside the component's own markup.

Props flow parent to child and are read-only.

Destructure props in the parameter list.

children holds nested JSX from the parent.

type CardProps = { title: string; children: React.ReactNode };

function Card({ title, children }: CardProps) {
  return (
    <section>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Props type

A TypeScript type describes the props the component accepts, including their value types.

type CardProps = { title: string; children: React.ReactNode };

2. Destructured props

Props arrive as one object; destructuring in the parameter list pulls out the fields you need.

function Card({ title, children }: CardProps) {

3. Reading a prop

Curly braces embed the title prop's value into the JSX — props are read-only inside the component.

<h2>{title}</h2>

4. Rendering children

children is the special prop holding whatever JSX the parent nested inside <Card>.

{children}

5. Renderable type

React.ReactNode is the type for anything renderable: elements, strings, numbers, arrays, or null.

React.ReactNode

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.