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 usingReact.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.
Top comments (2)
I believe you can also do this
which can be rewritten as
Yes! You sure can.