Render two elements side-by-side with React Fragments

Reset the to clear up all the previous examples and just get back to “Hello React”.

const element = <div>Hello React</div>

ReactDOM.createRoot(rootElement).render(element)

What happens if we break <div>Hello React</div> into two elements? How do I render both of them? They can’t both be the first argument. And render doesn’t support overloading like createElement.

const helloElement = <span>Hello</span>
const reactElement = <span>React</span>

ReactDOM.createRoot(rootElement).render(/* what goes here? */)

We could create another div and wrap the two together.

const helloElement = <span>Hello</span>
const reactElement = <span>React</span>
const element = (
  <div>
    {helloElement} {reactElement}
  </div>
)

ReactDOM.createRoot(rootElement).render(element)

But this isn’t always ideal because it inserts an extra DOM node.

Well, React gives us a solution for this. We can use a React Fragment, which is a special React element that doesn’t render to the DOM.

const helloElement = <span>Hello</span>
const reactElement = <span>React</span>
const element = (
  <React.Fragment>
    {helloElement} {reactElement}
  </React.Fragment>
)

ReactDOM.createRoot(rootElement).render(element)

This is so common that JSX has a special, and memorable syntax for it: empty tags.

const helloElement = <span>Hello</span>
const reactElement = <span>React</span>
const element = (
  <>
    {helloElement} {reactElement}
  </>
)

ReactDOM.createRoot(rootElement).render(element)

This is very useful for elements like tables and definition lists that have a very specific dom structure.

GPT4 take:

Render two elements side-by-side with React Fragments

In this lesson, we will explore how to render sibling elements without adding extra nodes to the DOM by using React Fragments.

Reset the Example:

1. Clear previous examples and set up a simple “Hello React” element.

   const element = <div>Hello React</div>
   ReactDOM.createRoot(rootElement).render(element)

Rendering Siblings:

1. Break the div into two separate span elements.

   const helloElement = <span>Hello</span>
   const reactElement = <span>React</span>

2. Discuss the problem with rendering two elements without an enclosing tag.

Using a Wrapper div:

1. Wrap both elements in a div to render them together.

   const element = (
     <div>
       {helloElement} {reactElement}
     </div>
   )
   ReactDOM.createRoot(rootElement).render(element)

2. Point out the downside: an extra DOM node that might be unnecessary.

Introducing React Fragments:

1. Replace the div with a React.Fragment to avoid adding extra nodes.

   const element = (
     <React.Fragment>
       {helloElement} {reactElement}
     </React.Fragment>
   )
   ReactDOM.createRoot(rootElement).render(element)

The Short Syntax for Fragments:

1. Use the empty tag syntax <>...</> as a shorthand for React.Fragment.

   const element = (
     <>
       {helloElement} {reactElement}
     </>
   )
   ReactDOM.createRoot(rootElement).render(element)

React Fragments are particularly useful for components that require a specific DOM structure, like tables or definition lists, where extra divs can break the desired layout.

By using React Fragments, we keep our DOM clean and semantic, exactly how we want it.