How To Use Fragments In React Web App

In this tutorial, you’ll learn how to use fragments in React web app. You might be wondering what are fragments used for in React. To put it simple, fragments in react web app helps to group a list of components.

Getting Started

Let’s get started with creating a React web app using Create React App. Once you have npm 5.2+ installed in your system, create the react web app using the following command:

// creating react app
npx create-react-app react-grid-demo

The above command will create the starter app for react web app. Once you have the project structure created, navigate to the project directory and start the web app.

cd react-fragment-demo
npm start

Point your browser to http://localhost:3000/ and you will have the application running.

Creating A React Component - ChildA

By default you have the App component inside the App.js file. Consider the App component as the parent component. Create a new component called ChildA inside the src folder called ChildA.js. Here is how the ChildA component looks :

import React, {Component} from 'react'

class ChildA extends Component{
    render(){
        return (
            <div>
                <li>Child A li 1</li>
                <li>Child A li 2</li>
            </div>
        )
    }
}

export default ChildA

The ChildA component returns two li items as shown in the above code.

Creating A React Component - ChildB

Create another React component called ChildB which again returns another list of li items. Create a file called ChildB.js inside src folder and add the following code:

import React, {Component} from 'react'

class ChildB extends Component{
    render(){
        return (
            <div>
                <li>Child B li 1</li>
                <li>Child B li 2</li>
            </div>
        )
    }
}

export default ChildB           

Nesting React Component

Import the ChildA and ChildB component inside the App component in the src/App.js file. From App component return multiple components ChildA and ChildB. Here is how the code looks:

import React, { Component } from 'react';
import ChildA from './ChildA.js'
import ChildB from './ChildB.js'

class App extends Component {
  render() {
    return (
      <div>
        <ChildA />
        <ChildB />
      </div>
    )
  }
}

export default App;   

Save the above changes and view the application in browser. You’ll have the following HTML code rendered:

<ul>
    <div>
        <li>Child A li 1</li>
        <li>Child A li 2</li>
    </div>
    <div>
        <li>Child B li 1</li>
        <li>Child B li 2</li>
    </div>
</ul>

As seen in the HTML code, you can figure out what is wrong with the HTML. Each child component is rendered with a parent container div. But the div makes the HTML invalid. This is where fragments in React comes into the picture. You can use fragments to avoid the container div.

Fragments in React Web App

In both of the React components ChildA and ChildB, enclose the returned HTML code inside React.Fragment instead of the div. Modify the ChildA component’s return HTML as shown:

<React.Fragment>
    <li>Child A li 1</li>
    <li>Child A li 2</li>
</React.Fragment>

Similarly modify the ChildB component’s return HTML:

<React.Fragment>
    <li>Child B li 1</li>
    <li>Child B li 2</li>
</React.Fragment>

Save the above changes and you will have the App component rendered in the browser with the following HTML:

<ul>
    <li>Child A li 1</li>
    <li>Child A li 2</li>
    <li>Child B li 1</li>
    <li>Child B li 2</li>
</ul>

Wrapping It Up

In this tutorial, you learnt the issue that you are trying to solve by using Fragments in React web app. You saw how to use fragments in React component.

Do let us know your thoughts in the comments below.