There is a pattern that is gaining consensus within the React community, known as FunctionAsChild. It is widely used in the popular react-motion library, which we will see in Chapter 7, Writing Code for the Browser.

The main concept is that, instead of passing a child in the form of a component, we define a function that can receive parameters from the parent. Let's see what it looks like:

const FunctionAsChild = ({ children }) => children()

As you can see, FunctionAsChild is a component that has a children property defined as a function and, instead of being used as a JSX expression, it gets called.

The preceding component can be used in the following way:

<FunctionAsChild> 
  {() => <div>Hello, World!</div>} 
</FunctionAsChild>

It is as simple as it looks: the children function is fired in the render method of the parent, and it returns the Hello, World! text wrapped in a div tag, which is displayed on the screen.

Let&apos...