At the end of that post, we discussed why having unnecessary div elements entering the DOM could potentially cause problems. Well, I guess there must have been a solution to this right?
In the React release 16.2, a new feature was introduced called a React fragment. Think of this as a component that doesn’t translate to HTML.
Instead of using <div>
's to wrap the elements we use or the shorthand syntax <>
.
Here below we have the typical solution to the error you get when you don’t wrap your React elements in a div
.
import React from 'react'
const App = () => {
return (
<div>
<p>Hello</p>
<p>World</p>
</div>
)
}
Here’s how we’d rewrite this using React.fragment
import React from 'react'
const App = () => {
return (
<React.fragment>
<p>Hello</p>
<p>World</p>
</React.fragment>
)
}
Now writing React.fragment
can be a pain! So React also introduced the <>
syntax
import React from 'react'
const App = () => {
return (
<>
<p>Hello</p>
<p>World</p>
</>
)
}
React.fragment
gets converted into regular JavaScript by a transpiler and after conversion looks like this. Something we’ve seen in a previous post!
React.createElement(React.fragment, null, ...children)
The difference is, it does not get inserted into the DOM!
#react #javascript #web-development