In React, components could only display a single element that could contain other elements. So you colud't do this.
const MyName = props => {
return (
<h1>{props.name}</h1>
<h2>{props.lastName}</h2>
)
}
You need to wrapp in one containing element like a div
, so React components can only return one child.
const MyName = props => {
return (
<div>
<h1>{props.name}</h1>
<h2>{props.lastName}</h2>
</div>
)
}
Because of this when you inspect the code is full of unnecessary div
elements that makes the code looks messy and hard to read.
Fragment
is a component you can import from React, which will replace those unnecessary div's.
import React, { Fragment } from 'react'
const MyName = props => {
return (
<Fragment>
<h1>{props.name}</h1>
<h2>{props.lastName}</h2>
</Fragment>
)
}
So when the page renders, you won't se the divs anymore just the elements that contains the data
You can reduce the code using <>
, is equivalent to using <Fragment />
const MyName = props => {
return (
<>
<h1>{props.name}</h1>
<h2>{props.lastName}</h2>
</>
)
}
The only caveats is that if you want to give the fragment a key, you have to use <Fragment>