Additional uses for the React "children" prop

In the last post of my React series, I went over how to pass props including calling on the "children" prop.

Article No Longer Available

Today, I will dive a bit deeper into the "children" prop by demonstrating another usage: rendering adjacent JSX elements.

React components must return a single JSX element (typically a <div>). That element can have other elements inside of it, but you must only return one root JSX element. This means that an extra <div> gets rendered with each component along with everything inside of it.

What if we don't want the extra element?

We can achieve this by using Higher-Order Components. A higher-order component is a function that takes a component and returns a new component. HOC along with the "children" prop can be used where we want to have adjacent JSX elements without an extra DOM element being rendered.

Using the props.children in HOC

Picking up from the example in the preceding post, we have a component that renders a Person.

import React from 'react';

const Person = (props) => {

    return (
        <div>
            <p onClick={props.click}>I'm {props.name} and I am 
               {props.age} years old</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.change} value= 
               {props.name} /> 
        </div>   
    )
}

export default Person;

Currently, we have two <p> elements and an <input> wrapped inside of the <div>.

If we removed the enclosing <div> tags we would get the following error:

Let's use HOC and props.children to demonstrate an alternative way to render these adjacent elements.

I created a folder src/hoc and a file inside of it named Aux.js which will hold our higher-order component.

const Aux = props => props.children;

export default Aux;

The sole purpose of our new Aux components is to return props.children which is a special property that simply outputs whatever is entered between the opening and closing tags of a component. Refer to "Passing Props in React" linked at the start of this post for more on props.children.

We can now go back to our Person component and make the following changes:

import React from 'react';
import Aux from '../../../hoc/Aux';

const Person = (props) => {

    return (
        <Aux>
            <p onClick={props.click}>I'm {props.name} and I am 
               {props.age} years old</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.change} value= 
            {props.name} /> 
        </Aux>
    )
}

export default Person;

We have imported the Aux component and replace the enclosing <div> element with opening and closing tags for Aux.

It is basically an empty wrapper utilizing the "children" property to render the JSX elements between the opening and closing tags of the Aux component!

Side note: you may have noticed there is no React import in the Aux component. This is because we're not using any JSX in it, so we're not implicitly using React.createElement() and therefore it works without the import.

That's it!

I hope this quick detour into exploring other uses for the "children" prop was helpful.

Comments

[shadowtime2000]

I believe you can also do this

<React.Fragment>
    <p>Foo STuff</p>
</React.Fragment>

which can be rewritten as

<>
    <p>Foo STuff</p>
</>

[CiaraMaria]

Yes! You sure can.