Components 7 exercises

Solving the any Problem with Children

The props.children pattern in React allows you to pass child components to a parent component, then have those child components appear beneath the parent in the tree.

export const Button = (props: {}) => {
return <button>{props.children}</button>;
const Parent = () => {

Loading exercise


0:00 In React, there's a pattern called props.children, which is where you're able to pass children, like child components, to this Button here. Then it flows through that component to appear beneath it in the tree.

0:15 How do we type this, though, in TypeScript? I see a lot of teams going children any, like this, which I guess is acceptable, but there is actually a legit way to do this and a proper way to define this.

0:28 Your job is to go and look at some of the resources that I've got below and to try to find a proper definition for this that will let you pass anything as a child.

0:39 There is various things that you can pass. You can pass strings. You can pass numbers. If I do this, I think I can even pass things like here. Of course I can pass other elements too. I can pass divs and all sorts of stuff.

0:53 That's your job, is to try to find the correct definition for how to type these children. Good luck.