• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to secondary sidebar

CodingStatus

- Level Up Your Status with Coding Expertise!

  • Tutorials
    • React Js Tutorials
    • JavaScript Tutorials
    • PHP Tutorials
    • HTML Tutorials
    • SQL Tutorials
    • Laravel Tutorials
  • Snippets
    • React Js Code Snippets
    • Ajax Code Snippets
    • Node.js Code Snippets
    • JavaScript Code Snippets
    • jQuery Code Snippets
    • SQL Code Snippets
  • Programs
    • PHP Program
    • Python Programs
    • Java Programs
  • How To
    • React Js How To
    • Node Js How To
    • Ajax How To
    • PHP How To
    • jQuery How To
    • JavaScript How to
  • Scripts
    • PHP Script
    • Js Script
    • React Js Script
    • JQuery Script
  • Projects
    • PHP Project
  • Interview Questions
  • Guide
  • API Integration
  • Installation

React Fragment

September 14, 2023 By Md Nurullah

Fragment is a powerful feature in React JS that is used to group multiple elements without extra nodes in the DOM. It is very useful to keep your JSX clean and avoid unnecessary elements in the rendered output.

In this tutorial, we’ll cover the concept and usage of React Fragments with clear examples.

Previous Topic – React Render Method. 

Table of Contents

  • What is React Fragment
  • <React.Fragment></React.Fragment>
  • <Fragment></Fragment>
  • Shorthand React Fragments (<></>)
  • React Fragments Case Study
    • Render Multiple Elements without React Fragments
    • Render Multiple Elements with React Fragments
    •  
  • Usage of React Fragment
    • 1. To Return Multiple Elements
    • 2. To Assign multiple elements to a variable
    • 3. To Group Elements with Text
    • 4. To render a list of Fragments
  • Suggestion

What is React Fragment

React Fragment is a useful feature for creating cleaner and more efficient React components. It will be very helpful when you need to return multiple elements from a component without adding an extra node in the real DOM.

A Fragment can be defined with these syntaxes –

  • React Fragment 
<React.Fragment></React.Fragment>
  • Fragment: 
<Fragment></Fragment>
  • Shorthand React Fragment:
<></>

For example –

Suppose we have created a component named MyBlog and return h1 & p elements by wrapping them with the ‘div’ element.

When you run your app, ‘div’ will be created in DOM as an extra node. Because there is no use of a div element in the DOM. So, It might affect the styling and structure of the web page.

function MyBlog() {
  return (
    <div>
      <h1>Welcome to CodingStatus</h1>
      <p>CodingStatus provides you the best content to learn React Js</p>
    </div>
  );
}

To solve this problem, you can use the React Fragment to group h1 & p elements together without adding an extra ‘div’ element.

function MyBlog() {
  return (
    <>
      <h1>Welcome to CodingStatus</h1>
      <p>CodingStatus provides you the best content to learn React Js</p>
    </>
  );
}

Note – React Fragment  does not appear in the DOM.

 

<React.Fragment></React.Fragment>

Using <React.Fragment></React.Fragment>, you can group and return multiple elements to the real DOM without adding any extra parent node.

The key point to remember is that React Fragments themselves are not visible in the DOM. Only their children’s elements will be visible. So, It is very useful to keep the HTML structure clean and efficient

Syntax –

<React.Fragment>
// Write  here multiple element
</React.Fragment>

Example –

function MyBlog() {
<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>
}

<Fragment></Fragment>

<Fragment></Fragment> also works similiar to the <React.Fragment></React.Fragment>. But If you want to use <Fragment></Fragment>, then you will have to import Fragment from the React library.

import React, { Fragment } from "react"

Syntax –

<Fragment>
Write multiple element here
</Fragment>

Example –

function MyBlog() {
<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>
}

Shorthand React Fragments (<></>)

Shorthand React Fragment is the short form of <React.Fragment></React.Fragment> & <Fragment></Fragment>.

<></> works similar to <React.Fragment></React.Fragment>. But It does not work for attributes or keys. So, 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>

Syntax –

<>
Write here multiple elements
</>

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 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 of group & rendering multiple elements with or without using Fragment.

return() method

Before learning React Fragment, you have to understand the following concept & usage of the 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 a () 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 an order or unorder list without using fragments 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 fragments 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 render multiple elements covered by a <div>, <ul> & a <table>. Both elements <ul> & <table> have 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 the big problem the making lightweight react applications. 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>
);
}
}

 

Usage of React Fragment

1. To Return Multiple Elements

2. To Assign multiple elements to a variable

3. To Group Elements with Text

4. To render a list of Fragments

Suggestion

Next Topic – React Component 

 

 

 

Filed Under: React Js Tutorials

Hello Developer, Welcome to my Blog. I'm Md Nurullah, a software engineer with 5+ years in full-stack web development. As the founder of CodingStatus.com, I'm passionate about sharing coding knowledge and collaborating for a brighter future. Let's connect and code together!

Primary Sidebar

Secondary Sidebar

React Js Tutorials,
  • React Class Components with Props
  • React App with CDN
  • React Js Tutorial
  • Introduction to React Js
  • What is React Js
  • Create React App with NPM
  • React App Folder Structure
  • React Components
  • React Function Component
  • React Function Component with Props
  • React Export and Import Function components
  • React Class Component
  • ReactDOM.render() Method in react js
  • ReactDOM.createRoot() in React Js
  • React Fragment
  • Render Method in React Js – render()
  • React Forms
  • React Lists
  • React Conditional Render
  • React Hooks – useState, useEffect & Custom Hooks
  • React Lifecycle Methods
  • React Event Handling with Examples
  • React State with Example
  • React props with Examples
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved