Composition and children

What this is. Whatever you put between a component's opening and closing tags arrives as a prop called children.

This is how you write a wrapper without deciding in advance what goes inside it.

Why this matters more than it looks. The alternative to composition is a component with twelve props deciding what to show. That component becomes harder to change every time it is used. A wrapper that takes children stays the same size no matter how many different things go inside it.

When you find yourself adding a boolean prop to control whether some markup appears, ask whether the caller should just pass that markup in.

Passing functions down. A child cannot change its parent's data, but it can be handed a function to call. That is the standard way for a child to report that something happened, and you will use it constantly once state arrives in the next module.