DEV Community

Cover image for The Beginner's Guide To React: Fragment
Bipin Rajbhar
Bipin Rajbhar

Posted on • Updated on

The Beginner's Guide To React: Fragment

What is a Fragment?
The React.Fragment component allows you to return multiple elements in a render() method without creating an additional DOM element.

If you are thinking about where React.Fragment component is useful then let’s take a scenario where you what to print two span side by side without wrapping it by an additional element such as div tag then this case you can use React.Fragment component.

We are not using JSX in the code given below.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const helloElement = React.createElement("span", null, "Hello, ");
      const worldElement = React.createElement("span", null, "World");
      const fragment = React.createElement(
        React.Fragment,
        null,
        helloElement,
        worldElement
      );

      ReactDOM.render(fragment, rootElement);
    </script>
</body>

Output:

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

    // JSX Code
      const helloElement = <span>Hello, </span>;
      const worldElement = <span>World</span>;
      const fragment = (
        <React.Fragment>
          {helloElement}
          {worldElement}
        </React.Fragment>
      );

      ReactDOM.render(fragment, rootElement);
    </script>
</body>

Output:

You can also use <></> syntax instead of React.Fragment which is I personly use.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

    // JSX Code
      const helloElement = <span>Hello, </span>;
      const worldElement = <span>World</span>;
      const fragment = (
        <>
          {helloElement}
          {worldElement}
        </>
      );

      ReactDOM.render(fragment, rootElement);
    </script>
</body>

Output:

Discussion (2)

Collapse
anirudh500 profile image
Anirudh Singh

Great post! Will be very helpful for all the beginners out there.

Collapse
bipinrajbhar profile image
Bipin Rajbhar Author

thankyou so much 😊, please let me know what can I do more to make this series more beneficial πŸ”₯