Fragment in React.js || example of Fragment
Tags: webdev, javascript, beginners, react
Published: 2024-03-19 07:09:13

In React, a fragment is a lightweight syntax that allows you to group multiple children elements without adding extra nodes to the DOM. Fragments are useful when you want to return multiple elements from a component, but you don't want to wrap them in an unnecessary parent element.

Here's an example demonstrating the usage of fragments:

```js
import React from 'react';

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

function Header() {
  return (
    <header>
      <h1>This is the header</h1>
      <p>Subtitle goes here</p>
    </header>
  );
}

function Content() {
  return (
    <main>
      <p>Content goes here</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </main>
  );
}

export default App;

```
In this example, the App component renders a Header and a Content component. However, the JSX returned by the App component must have a single root element. Instead of wrapping the Header and Content components inside a div, we can use a fragment to avoid adding an extra node to the DOM:

```js
import React from 'react';

function App() {
  return (
    <>
      <Header />
      <Content />
    </>
  );
}



```

In this updated version, the `<>...</>` syntax is a fragment. It doesn't add any extra DOM element, allowing the Header and Content components to be rendered side by side without an unnecessary parent `div`.

Fragments improve code readability and performance by avoiding unnecessary DOM nesting. They are especially useful when working with components that require strict DOM structures or when returning lists of elements.

[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)