Reader small image

You're reading from  React 18 Design Patterns and Best Practices - Fourth Edition

Product typeBook
Published inJul 2023
Reading LevelExpert
PublisherPackt
ISBN-139781803233109
Edition4th Edition
Languages
Tools
Right arrow
Author (1)
Carlos Santana Roldán
Carlos Santana Roldán
author image
Carlos Santana Roldán

Carlos Santana Roldán is a senior web developer with more than 15 years of experience. Currently, he is working as a Principal Engineer at APM Music. He is the founder of JS Education, where he teaches people web technologies such as React, Node.js, JavaScript, and TypeScript.
Read more about Carlos Santana Roldán

Right arrow

Understanding FunctionAsChild

The FunctionAsChild pattern is gaining consensus within the React community. It is widely used in popular libraries like react-motion, which we will explore in Chapter 5, Writing Code for the Browser.

The main concept is that instead of passing a child as 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 with a children property defined as a function. Instead of being used as a JSX expression, it gets called.

The preceding component can be used like this:

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

This example is quite simple: the children function is executed within the parent’s render method, returning the Hello, World! text wrapped in a div tag, which is displayed on the screen.

Now, let’...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
React 18 Design Patterns and Best Practices - Fourth Edition
Published in: Jul 2023Publisher: PacktISBN-13: 9781803233109

Author (1)

author image
Carlos Santana Roldán

Carlos Santana Roldán is a senior web developer with more than 15 years of experience. Currently, he is working as a Principal Engineer at APM Music. He is the founder of JS Education, where he teaches people web technologies such as React, Node.js, JavaScript, and TypeScript.
Read more about Carlos Santana Roldán