Reacting to Big Div Energy
Tags: javascript, react, programming, webdev
Published: 2022-08-29 05:22:52


React makes creating complex, interactive applications a relatively pain-free process. It accomplishes this by straying from Vanilla JavaScript's use of imperative programming, which requires developers to tell JavaScript both _what_ to render and _how_ to render it. React utilizes declarative programming to handle the how of rendering under the hood, which leaves developers free to focus on what an app can do.

Like most good things though, React's convenience comes at a price, and that price is pedantry. React holds developers to high syntactical standards, and, in exchange, it does the dirty work on the DOM side. If its standards are not met, React will complain by raising an error. Let's consider the example below:

```
function MyBrokenComponent() {
    return (
        <h1>Beware!</h1>
        <p>I will return an error</p>
    )
}
```
In this example, we are telling React to return a `h1` element and a `p` element when `MyBrokenComponent` is rendered by its parent component. This will result in the following error:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzam98jt0g7uyznzu9yf.png)

This error is telling us that React cannot render a component with more than one parent element. We are getting this error because React requires that return statements be wrapped in a parent element, and the return statement above does not meet this requirement. Let's look at another example:

```
function MyOtherBrokenComponent() {
    return (
        <p>Try again!</p>
        <p>I will also return an error</p>
    )
}
```
This example will result in the same syntax error as our previous example. Although our return statement only contains one _type_ of element, `p`, it still contains two elements, and thus fails to meet React's one-parent standard. Let's examine an example that will not return an error:

```
function MyWorkingComponent() {
    return (
        <div>
            <h1>You're in the clear!</h1>
            <p>I will not return an error</p>
        </div>
    )
}
```
It is apparent when comparing our error-free component to previous examples that `MyWorkingComponent` has something the others lack: one parent element. In this case, as in many others, that parent element is a `div`. Wrapping elements within one parent element enables React to make sense of our declarative statements, and using `div`s is an easy for developers to ensure that React's syntactical needs are being met.

While `div`s are a useful tool for repairing syntax, they are not the only one we as developers have at our disposal. Let's consider the two examples below: 

```
function MyDivlessComponent() {  
    return <p>I will not return an error either!</p>
}
```
```
function MyHappyComponent() {
    <div>
        <h1>Divs</h1>
        <h2>keep</h2>
        <p>React</p>
        <p>happy!</p>
    </div>
}
```
Our first component, `MyDivlessComponent`, has a working return statement but no `div`. How can this be? Well, a `div` is just one example of a parent component. The key to following React's strict syntax rules is to keep everything in the return statement contained inside of one box, or parent element. In the case of `MyDivlessComponent`, our parent element is a `p` element without any child elements. On the other hand, `MyHappyComponent` contains 4 child elements, and thus requires a parent element to be wrapped around those children.

Learning the ins and outs of a new framework can be tricky, but `div`s provide developers with an easy fix to one of React's most common errors.