React Fragments
React Fragments is introduced from the 16.2 and above version, to facilitate the grouping off a list of children without adding extra nodes to the DOM.
Syntax:
child1
child2
.. ..... .... ...
Example:
class App extends React.Component {
render() {
return (
Welcome
You are in the world of ReactJS.
);
}
}
Importance of React Fragments:
- The execution of code is faster with the use of React fragments as compared to the div tag.
- Less memory is utilised with the use of React fragments as compared to the div tag.
Fragments Short Syntax:
For declaring fragments, there is another shorthand exists.
Example:
class Columns extends React.Component {
render() {
return (
<>
Welcome
You are in the world of ReactJS.
);
}
}
Keyed Fragments:
In ReactJS, Key is the only attribute that can be passed with the Fragments, as it is needed for mapping a collection to an array of fragments.
Example:
Function = (props) {
return (
{props.items.data.map(item => (
{item.brand}
{item.type}
{item.weight}
))}
)
}