The children prop is a magical prop that all React components automatically have. It can be used to render child nodes. It's magical because it's automatically there, without us having to do anything, as well as being extremely powerful. In the following steps, we'll use the children prop when creating Page and PageTitle components:

1. First, let's create a file called PageTitle.tsx with the following content: 

import styled from '@emotion/styled';

export const PageTitle = styled.h2`
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0px 5px;
  text-align: center;
  text-transform: uppercase;
`;

2. Let's create a file called Page.tsx with the following content: 

import { FC } from 'react';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { PageTitle } from './PageTitle';

interface Props {
  title?: string;
}
export const Page: FC<Props> = ({ title }) => (
  <div
    css={css`
      margin: 50px auto 20px auto;
      padding: 30px 20px;
      max-width: 600px;
    `}
  >
 {title && <PageTitle>{title}</PageTitle>}
  </div>
);

Here, the component takes in an optional title prop and renders this inside the PageTitle component. The page component horizontally centers its content in a 600px space. 

3. Now, it's time to use the children prop. First, let's destructure it in the component parameters:

export const Page: FC<Props> = ({ title, children })

Notice that we didn't need to define children in our Props interface. This is because it's already been made available via the FC type.

4. Now, we can reference the children prop after the title in the JSX:

export const Page: FC<Props> = ({ title, children }) => (
  <div ...>
    {title && <PageTitle>{title}</PageTitle>}
    {children}
  </div>
);

In the consuming component, the content nested within the Page component will be rendered where we have just placed the children prop.

5. Let's move back to HomePage.tsx now and import the Page and PageTitle components:

import { Page } from './Page';
import { PageTitle } from './PageTitle';

6. Let's use the Page and PageTitle components in the HomePage component:

export const HomePage = () => (
  <Page>
    <div
      css={css`
        display: flex;
        align-items: center;
        justify-content: space-between;
      `}
    >
      <PageTitle>Unanswered Questions</PageTitle>
      <PrimaryButton>Ask a question</PrimaryButton>
    </div>
    <QuestionList data={getUnansweredQuestions()} />
  </Page>
);

Notice that we aren't taking advantage of the title prop in the Page component in HomePage. This is because this page needs to have the Ask a question button to the right of the title, so we are rendering this within HomePage. However, other pages that we implement will take advantage of the title prop we have implemented.

So, the children prop allows a consumer to render custom content within the component. This gives the component flexibility and makes it highly reusable, as we'll discover as we use the Page component throughout our app. Something you may not know, however, is that the children prop is actually a function prop. We'll learn about function props in the next section.