Isaac Godwin Udofia
2 Nov 2022
•
6 min read
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
);
}
}
export default App;
But it doesn’t. React throws up an error with a message that says “Adjacent JSX elements must be wrapped in an enclosing tag“. This is because you cannot return multiple elements from a React component without wrapping them in something.
Failed to compile error message
Before React 16, the common way to solve the problem was to enclose the adjacent JSX elements inside a wrapper tag, usually a div.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
And it totally works. But many people do not like this solution because it adds extra markup to the output of the component which is undesirable in many cases.
So the React developers made it possible to return an array of elements in React 16, which enabled developers to skip the wrapper tag:
import React, { Component } from "react";
class App extends Component {
render() {
return [
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>,
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
];
}
}
export default App;
React 16.2 introduced another way to solve this problem: using Fragments. Fragments let you group a list of children without adding extra nodes to the DOM.
Here’s an example of how that works:
import React, { Component } from "react";
class App extends Component {
render() {
return (
<React.Fragment>
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</React.Fragment>
);
}
}
export default App;
If you check out the rendered component using your browser’s dev tools, you will see that there no extra node was inserted into the DOM.
Console view using Fragments
This is my preferred way of rendering multiple elements from a React component because, according to Dan Abramov, it’s faster and uses less memory than container divs. It also makes it easier to work with CSS layout techniques such as Grid and Flexbox where having extra markup can have an impact on the layout.
In JSX, rendering a component that begins with a lowercase letter compiles down to React.createElement('component'), the equivalent of an HTML element. For example, let’s say you have a button component that returns a simple button element, this will not work as expected.
import React, { Component } from "react";
import ReactDOM from "react-dom";
class button extends Component {
render() {
return <button className="App-button">Yo!</button>;
}
}
ReactDOM.render(<button />, document.getElementById("root"));
Instead of rendering your
Isaac Godwin Udofia
See other articles by Isaac
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!