You must know the concept & usages of React Fragments if you need to render and display more than one element in the DOM. Here, You will get complete information with some examples. After finishing this tutorial, You can easily implement it in your web applications.
What’s Before –
Before getting started, You must know about the React Render Method. If you have already known it, then you can continue reading.
Contents
Fragment in React Js
The Fragment in React js will be very helpful. if you are working with the render() method in the Class Component for rendering & displaying multiple HTML elements on the web page.
If you use Fragment, you can group and render multiple child nodes without adding extra & useless parent nodes to the DOM.
If you haven’t completely understood the concept of Fragement in react js, Don’t worry, It will be explain with an example from the next step.
Fragment can be written in any one of the following syntexes –
- React Fragment: <React.Fragment></React.Fragment>
- Fragment: <Fragment></Fragment>
- Shorthand React Fragment: <></>
1. React Fragment – <React.Fragment></React.Fragment>
The React Fragment make a group multiple elements without adding extra node in the DOM.
You can use the React Fragment to return more than one element using the return() method within the render() method.
The React Fragment is not visible in the DOM. Only it’s children elements will be visible.
Syntax –
<React.Fragment> // Write here multiple element </React.Fragment>
Example –
<React.Fragment> <h2>About CodingStatus</h2> <p>CodingStatus is best blog site to Learn React Coding from Scratch to build an application</p> <h3>CodingStatus Author</h3> <p>Noor Khan</p> </React.Fragment>
2. Fragment – <Fragment></Fragment>
Fragment – <Fragment></Fragment> works similiar to the <React.Fragment></React.Fragment>
If you want to use <Fragment></Fragment>, then you will have to import Fragment from React library.
import React, { Fragment } from "react"Syntax –
<Fragment> Write multiple element here </Fragment>
Example –
<Fragment> <h2>About CodingStatus</h2> <p>CodingStatus is best blog site to Learn React Coding from Scratch to build an application</p> <h3>CodingStatus Author</h3> <p>Noor Khan</p> </Fragment>
3. Shorthand React Fragments – <></>
Shorhand React Fragment is the short form of React.Fragment.
Syntax –
<> Write here multiple elements </>
Important Notes –
- Shorthand React Fragment <></> works similar to <React.Fragment></React.Fragment>. But It does not work for attributes or keys.
- This means that you can’t pass attributes or keys to the <></>. If you need to pass attributes & keys, then you must use the <React.Fragment>
- You may use <></> instead of <React.Fragment></React.Fragment> or <Fragment></Fragment>.
Example –
<> <h2>About CodingStatus</h2> <p>CodingStatus is best blog site to Learn React Coding from Scratch to build an application</p> <h3>CodingStatus Author</h3> <p>Noor Khan</p> </>
React Fragment with Key
React Fragment accepts only a key attribute. Even It will support more additional attributes in future versions.
If you need to return multiple valaues of an array then you can use React Fragment with key.
Note – You can’t use any other attribute name insteadd of key
Example –
class Demo extends React.Component {
data = [
{
id: 1,
name: "First Heading",
email: "First Description"
},
{
id: 2,
name: "Second Heading",
email: "Second Description"
},
{
id: 3,
name: "Third Heading",
email: "Third Description"
},
{
id: 4,
name: "Fourth Heading",
email: "Fourth Description"
},
{
id: 5,
name: "Fifth Heading",
email: "Fifth Description"
}
];
render() {
return (
<React.Fragment>
{this.data.map(value => (
<React.Fragment key={value.id}>
<h3>{value.title}</h3>
<p>{value.desc}</p>
</React.Fragment>
))}
</React.Fragment>
);
}
}React Fragments Case Study
Now, Let’s discuss the React Fragment case study and we will understand why should use the React Fragment in React js. Even you will see two examples to group & render multiple elements with or without using Fragment.
return() method
Before learning React Fragment, you have to understand the following concept & usage of return method in react js.
- The render() method is used to return a value from a function.
- You should define the render() method within the React Render Method().
- The return method can only accept a single element with or without () bracket.
- If you need to pass multiple elements, then you have to place them within a parent element such as <div> or react fragment
Render Multiple Elements without React Fragments
If you want to render multiple elements without using the React Fragment, then you can put them with a parent element such as div and pass them to the render() method that should be defined within a render() method.
Note –
- You will get an error, If you pass multiple elements without any parent elements to the return() method.
- Parent element will be visible in the DOM
- return method always considers a parent element as a single element either it contains one or more elements
- If you need to declare a class name, style, or other attributes except the key attribute, then you should always use the <div> element.
Class Demo extends React.Component {
render(){
return(
<div>
<h1>React Tutorial</h1>
<p>Learn React Tutorial From Scratch</p>
<p>Even Create a single web applicatio using React js</p>
</div>
);
}
}You can also render multiple items of a order or unorder list without using fragment through a single component.
Class Demo extends React.Component {
render(){
return(
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>React js</li>
</ul>
);
}
}You can also render multiple rows of a table without using fragment through a single component.
Class Demo extends React.Component {
render(){
return(
<table>
<tr>
<th>S.N</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Noor Khan</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Sunil Kumar</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Aayush Aryan</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>Sonali Singh</td>
<td>22</td>
</tr>
<tr>
<td>5</td>
<td>Veer Nanda</td>
<td>21</td>
</tr>
</table>
);
}
}Render Multiple Elements with React Fragments
You have seen three examples that renders multiple elements covered by a <div>, <ul> & a <table>. Those both elements <ul> & <table> has a usage to create a list & table respectively. But a <div> is a useless element that is not good for existing in the DOM. that’s is the big problem the making lightweight react application. So, to solve this problem, React Fragment was introduced which is a very useful feature.
Example –
Class Demo extends React.Component {
render(){
return(
<React.Fragment>
<h1>React Tutorial</h1>
<p>Learn React Tutorial From Scratch</p>
<p>Even Create a single web applicatio using React js</p>
</React.Fragment>
);
}
}How to Use React Fragments
Now, You will learn how to use the React Fragment from the next step. Here, I have used <Fragment></Fragment>. Once you learn it, you can try it yourself by using other syntaxes.
Before getting started, You should setup the Create React App project and write your own code in App.js
1. Import React Fragment
First of all, import the Fragment from the react library at the top of page App.js
import React, { Component, Fragment } from "react"2. Create Multiple elements within React.Fragment
- Define a render method within the class App
- Create a heading, & two paragraph within <Fragment></Fragment>
- Export default App
FIle Name – App.js
Class App extends Component {
render(){
return(
<React.Fragment>
<h1>React Tutorial</h1>
<p>Learn React Tutorial From Scratch</p>
<p>Even Create a single web applicatio using React js</p>
</React.Fragment>
);
}
}
export default App;3. Run App to get React Fragment Output
After that, run npm start to start development server then enter the following url in your web browser
http://localhost:3000
What’s Next?
After learning this React Fragment, You can learn React Component in the upcoming tutorial.
Leave a Reply