React.js – Fragments

In this tutorial we would cover React.js Fragments under the following sub-topics:

1. Why React Fragments
2. A Simple Example
3. Another Example With Table
4. Fragment with key Attribute

1. Why React Fragment

React.js fragments allow you to group a set of children elements without adding extra nodes to the DOM. Most times, multiple elements need to be rendered in in the DOM. By requirement, these elements must be wrapped inside a single parent tag, usually a div tag. This sometimes results in unnecessary markups. Fragments are used to solve this problem.

2. A Simple Example.

We create new app with a component that returns a JSX with three nodes and an enclosing <div> tag. This is shown below:

import React from 'react'

function FragmentDemo() {
    return (
        <div>
            <h1>KindsonTheGenius Tutorials</h1>
            <p>Demo on Fragments</p>
            <h4>Angular is fun!</h4>
        </div>
    )
}

export default FragmentDemo

When this code executes,  the enclosing <div> tag is rendered along with other tag. Now, we can replace this div tag with React Fragment. The modified JSX is shown below:

return (
    <React.Fragment>
        <h1>KindsonTheGenius Tutorials</h1>
        <p>Demo on Fragments</p>
        <h4>Angular is fun!</h4>
    </React.Fragment>
)

When React renders this modified JSX, you’ll see that no enclosing tag is added.

3. Another Example With Table

In this example, we will have two components: Table and Columns. The Columns component would be nested as a child of the Table component.

Markup for Table component:

return (
    <table>
        <tbody>
            <tr>
                <Columns></Columns>
            </tr>
        </tbody>
    </table>
)

Markup for Columns component:

return (
    <div>
        <td>Name</td>
        <td>Kindson</td>
    </div>
)

And of course, you’ll add the Table component to the App component.

Now, when the component is rendered, it would result in a warning in the console: “<td> cannot appear as a child of <div>…”.

Now we can solve this problem by replacing the enclosing <div> of the Columns component with <React.Fragment>. I’m not going to show the code here. But I hope you try it out yourself.

4. Passing Key Attribute to Fragments

When a React fragment is used to render a list, it is also possible to pass in a key as an attribute to the fragment. In the example below, we extend the previous example to include list rendering with the fragment receiving a key.

    students = [];
    return (
        <React.Fragment>
            {
                students.map(student => (
                    <React.Fragment key='student.id'>
                        {student.name}
                    </React.Fragment>
                ))
            }
            <td>Name</td>
            <td>Kindson</td>
        </React.Fragment>
    )

Finally, I would like to mention that  React fragment can be used in it’s short form. So instead of using <React.Fragment> …</React.Fragment> we can use empty tags, like so <>…</>.

I would still work fine.