Props

Pass “orders” to a component to change how it looks and behaves

Key points

Props are the "order" you pass to a component. You write them just like HTML attributes
The receiving component gets them as function arguments: function Greeting({ name }) { ... }
Don't change props you receive. If something needs to change, the parent that passes them changes it

Try it

function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}</p>
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <Greeting name="Wilson" />
      <Greeting name="Johnson" />
    </div>
  )
}

Open Sandbox

Add a third Greeting
Also pass age to Greeting and show "Age: N" (hint: { name, age })
See what happens if you forget to pass name

Common pitfalls

Component names start with a capital letter

If you write <greeting> in lowercase, it's treated as an HTML tag. Start your own components with a capital letter, like <Greeting>.

Wrap anything that isn't a string in { }

name="Wilson" is a string. To pass a number or a variable, wrap it in { }, like age={30}.