A self-eradicating component for rendering multiple elements.
Prior to React v16, returning multiple elements from a component required to wrap them in an auxiliary element, e.g.
const Root = () => {
return <div>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</div>;
};
The latter produces the following DOM:
<div>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</div>
Starting with React v16, a single component can return multiple components without a wrapping element, e.g.
const Aux = (props) => {
return props.children;
};
const Root = () => {
return <Aux>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</Aux>;
};
The latter produces paragraph elements without the wrapping node:
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
As you can see, react-aux is literally just 3 lines of code. Therefore, you could implement it in your own codebase without using react-aux. However, props => props.children on its own does not explain the intent. react-aux as an abstraction serves the purpose of enabling a self-documenting code, i.e. the next time you see someone doing:
import Aux from 'react-aux';
const Root = () => {
return <Aux>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</Aux>;
};
You will know exactly what is the intent of the code.
You can use an array if you assign each React$Element a pseudo-property key with a unique value, e.g.
import Aux from 'react-aux';
const Root = () => {
return [
<p key='p1'>Hello, World!</p>,
<p key='p2'>I am a demo for react-aux.</p>
];
};
However, it requires manually ensuring key uniqueness and I am too lazy for this.
"aux" is a convention I've been using ever since I remember starting to write HTML/ CSS. Auxiliary element is something that does not have semantic purpose but exist for the purpose of grouping elements, styling, etc.