Reacting to Big Div Energy

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:

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 divs is an easy for developers to ensure that React's syntactical needs are being met.

While divs 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 divs provide developers with an easy fix to one of React's most common errors.