I was reading the React doc and get confused by the topic Fragments.
Since we can basically return an array in React, in what situation would one need <Fragements />
?
Here is a code sample:
const ReturnArray = () => {
const items = [
<div key={1}>Item 1</div>,
<div key={2}>Item 2</div>,
<div key={3}>Item 3</div>,
]
return items
}
const ReturnFragments = () => {
const items =
<React.Fragment>
<div key={1}>Item 1</div>
<div key={2}>Item 2</div>
<div key={3}>Item 3</div>
</React.Fragment>
return items
}
I think they are the same.
Most existing topics talk about "key warning issues" like this on github, but I just want to know the use cases of <Fragments />
Edit:
Please tell me if there is anything ambiguous.
To be specific:
Please explain the difference between <ReturnArray />
and <ReturnFragments />
. They both return multiple elements without useless <div>
tag. Why bother using the extra <React.Fragment />
part?