What are fragments?

It's common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}

There is also a shorter syntax, but it's not supported in many tools:

render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
)
}

Author of content
Edit this page

Made by Michael Sakhniuk

Twitter