Can I wrap multi-line JSX expressions in an element other than a <div>?

Question

Can I wrap multi-line JSX expressions in an element other than a <div>?

Answer

JSX expressions can be wrapped in an element other than a <div> element to be sure that the first opening tag and final closing tag of a JSX expression belong to the same element.

This element can be an HTML element where the nesting is valid according to HTML5 specifications (see MDN documentation to check for permitted content in a specific element) or, this element can be custom components that have child components or other HTML elements nested inside.

10 Likes

dear @aubsrey!

if your goal is only wrapping, you can also use the short syntax for this purpose.

looks like this:
<>
<p>Hello there</p>
<p>Have a nice day!</p>
</>

it’s on the official site of React, here you can read about it

I hope it helps! :slightly_smiling_face:

2 Likes

update: you can also use Fragments.
Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Here is the article about it