Why is React asking to render a single DOM element?
Tags: react, webdev, javascript, beginners
Published: 2021-01-05 03:40:46

When writing React code , you would have encountered an error related to React asking to render a single ``DOM`` element. At this point, the simplest workaround is that you encapsulate the elements by a pair of outer div tags.

### **However, have you ever wondered**
* What is the real reason behind this error? 
* Is this a React bug ?
* How to resolve this error? 
* What are the pros and cons of packing elements into div tags above?

## **Why render single DOM element?**
In this article I will try to help you answer the above questions.
Let's say i have a component that goes as follows:
```javascript
class App extends React.Component {
  render() {
    return (
      <div> Type: Dog </div>
      <div> Type: Cat </div>
    )
  }
}
```
I have used JSX to define the above component render. However, this is just "syntactic sugar" for the 
[React.createElement (component, props, ... children) method](https://reactjs.org/docs/react-api.html#createelement)

Therefore, the above code would be equivalent to the following code:
```javascript
class App extends React.Component {
  render() {
    return (
      React.createElement('div', null, 'Type: Dog')
      React.createElement('div', null, 'Type: Cat')
    )
  }
}
```
In the code above, each **React.createElement** function will return a React Element. That means the function render () of the App class will return 2 elements simultaneously.

This is completely impossible with functions in JavaScript in particular and any other programming language in general, not just React.

For example, Let's look at a function in pure JavaScript as follows:
```javascript
const func = (x, y) => {
  return (x + y)(x - y);
};
```
The above function func is an arrow function - that returns simultaneously (x + y) and (x - y) . And ofcourse we will get an error.

In short, React's request to render the single DOM element is required, not due to React's bug.

**Ways to solve render single DOM element problem?**
To solve the above problem, There are 3 ways as below.

 **1. Use one more tag to encapsulate the Elements**

This is the easiest way that almost anyone can think of first. That is using one tag to encapsulate the Elements.

Then, the code above becomes:
```javascript
class App extends React.Component {
  render() {
    return (
      <div className="app">
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </div>
    );
  }
}
```
 **2. Using React.Fragment**
You can use [React.Fragment](https://reactjs.org/docs/fragments.html) as follows to solve the problem:

```javascript
class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </React.Fragment>
    );
  }
}
```
 **3. Using <> </>**
```javascript
class App extends React.Component {
  render() {
    return (
      <>
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </>
    );
  }
}
```
**Note:** This is just a **shortened syntax** for React.Fragment, not a completely different way.

## **Epilogue**
So, I've covered why React requires rendering of a single DOM element. And some ways to help you fix the above error are:

* Using an extra pair of tags packing the Elements
* Using **React.Fragment**
* Using <> </>
In addition to the above methods, do you know any other ways? If yes, share it with me and everyone!