1.8 KiB
| title |
|---|
| Fragments |
Fragments
Fragments are way to render multiple elements without using a wrapper element. When attempting to render elements without an enclosing tag in JSX, you will see the error message Adjacent JSX elements must be wrapped in an enclosing tag. This is because when JSX transpiles, it's creating elements with their corresponding tag names, and doesn't know what tag name to use if multiple elements are found. In the past, a frequent solution to this was to use a wrapper div to solve this problem. However, version 16 of React brought the addition of Fragment, which makes this no longer necessary.
Fragment acts a wrapper without adding unnecessary divs to the DOM. You can use it directly from the React import, or deconstruct it:
import React from 'react';
class MyComponent extends React.Component {
render(){
return (
<React.Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</React.Fragment>
);
}
}
export default MyComponent;
// Deconstructed
import React, { Component, Fragment } from 'react';
class MyComponent extends Component {
render(){
return (
<Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</Fragment>
);
}
}
export default MyComponent;
React version 16.2 simplified this process further, allowing for empty JSX tags to interpretted as Fragments:
return (
<>
<div>I am an element!</div>
<button>I am another element</button>
</>
);