Let's put what we have learned about component patterns to the test with some questions:

1. What special property does React give us to access a component's, children?
2. How many components can share state with React context?
3. When consuming the React context, what pattern does it use to allow us to render our content with the context?
4. How many render props can we have in a component?
5. How many children props do we have in a component?
6. We only used withLoader on the product page. We use the following function in ProductData.ts to get all the products:

export const getProducts = async (): Promise<IProduct[]> => {
  await wait(1000);
  return products;
};

Can you use this to implement a loader spinner on the products page by consuming the withLoader HOC?

7. Is it possible to create a loader spinner using the children props pattern? The consuming JSX would be something like the following:

<Loader loading={this.state.loading}>
  <div>
    The content for my component ...
  </div>
</Loader>

If so, have a go at implementing it.