The fragment is the replacement of the root element of the component. in some cases, design can be different when we use the <div> tag that's why React. Fragment implemented to remove designing
Fragment provides better performance as compare to div tag under render() hence we should always use Fragment in place of <div>.
Why we use Fragments?
The main reason to use the Fragments tag is:
It makes the execution of code faster as compared to the div tag.
It takes less memory.
Syntax
<React.Fragment>
<h2> child1 </h2>
<p> child2 </p>
.. ..... .... ...
</React.Fragment>
Example
// Rendering with fragments tag
class App extends React.Component {
render() {
return (
<React.Fragment>
<h1> REACT </h1>
<p> Welcome to the SHIVA CONCEPT SOLUTION\. </p>
</React.Fragment>
);
}
}
There is also another shorthand that exists for declaring fragments for the above method. It looks like an empty tag in which we can use '<>' and '' instead of the 'React.Fragment'.
Example
//Rendering with short syntax
class Columns extends React.Component {
render() {
return (
<>
<h1> REACT </h1>
<p> Welcome to the SHIVA CONCEPT SOLUTION\. </p>
</>
);
}
}
Create App.js using Fragments:-
Keyed Fragments
The shorthand syntax does not accept key attributes. You need a key for mapping a collection to an array of fragments such as to create a description list. If you need to provide keys, you have to declare the fragments with the explicit <React.Fragment> syntax.
Note: Key is the only attributes that can be passed with the Fragments.
Example
Function = (props) {
return (
<Fragment>
{props.items.data.map(item => (
// Without the 'key', React will give a key warning
<React.Fragment key={item.id}>
<h2>{item.name}</h2>
<p>{item.url}</p>
<p>{item.description}</p>
</React.Fragment>
))}
</Fragment>
)
}
Main Component .JS
import Fragmentexample from "./Fragmentexample"
Example of Keyed Fragments:-
import React from "react";
POST Answer of Questions and ASK to Doubt