Props

React components, as functions, work with a single parameter, a plain object, that we call props by convention.

function Home(props: T) {}

The props object contains the props passed by the parent. Its type reflects what is expected from the parent:

type T = { x: number; y: number }
//
function Home(props: T) {
    //   const {x, y} = props
}

At call site, we pass the expected props:

<Home x={3} y={6} />

Note: we frequently inline destructure props:

function Home({ x, y }: T) {
    //
}

parameter-less components

parameter-less components produce the same markup unconditionally.

function Home() {
    //
}

children

We can nest elements under the component:

<Container>
    <p>Hello</p>
</Container>

React passes such elements to the component as a prop, the children prop, whose type is ReactNode.

If the component is to use it, it declares a children prop:

function Container(props: { children: ReactNode }) {
    return <div>{props.children}</div>
}

Note: we can technically nest elements by passing them to the children prop, but it is much less readable:

<Container children={<p>Hello</p>} />

conceptual

props as dependencies

Props are dependencies. When the parent calls the component with different props, its content changes.

conceptual: a contract

We set up a contract between the component and its caller: The component declares a list of props it expects to receive. It is then up to the caller to provide them.