How to Avoid Extra Wrapping div in React?

To group multiple elements together without an extra wrapper div in React, we can use fragments.

To add them, we can use the React.Fragment component or <></> for short.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </>
  );
}

or:

import React from "react";

export default function App() {
  return (
    <React.Fragment>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </React.Fragment>
  );
}