Additional uses for the React "children" prop
Tags: react, javascript, tutorial
Published: 2020-11-28 21:30:03

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

{% link https://dev.to/proiacm/passing-props-in-react-4cno %}

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](https://reactjs.org/docs/higher-order-components.html). 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:

![](https://i.imgur.com/tltGYjhl.png)


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.