We're planting a tree for every job application! Click here to learn more

How to troubleshoot React errors

Isaac Godwin Udofia

2 Nov 2022

6 min read

How to troubleshoot React errors
  • JavaScript

Rendering adjacent JSX elements

Let’s say you want to render multiple elements from a React component’s render function, you might think that the following code sample below should just work:
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <header className="App-header">
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    );
  }
}

export default App;

But it doesn’t. React throws up an error with a message that says “Adjacent JSX elements must be wrapped in an enclosing tag“. This is because you cannot return multiple elements from a React component without wrapping them in something.

Failed to compile error message

Before React 16, the common way to solve the problem was to enclose the adjacent JSX elements inside a wrapper tag, usually a div.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

And it totally works. But many people do not like this solution because it adds extra markup to the output of the component which is undesirable in many cases.

So the React developers made it possible to return an array of elements in React 16, which enabled developers to skip the wrapper tag:

import React, { Component } from "react";

class App extends Component {
  render() {
    return [
      <header className="App-header">
        <h1 className="App-title">Welcome to React</h1>
      </header>,
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    ];
  }
}

export default App;

React 16.2 introduced another way to solve this problem: using Fragments. Fragments let you group a list of children without adding extra nodes to the DOM.

Here’s an example of how that works:

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </React.Fragment>
    );
  }
}

export default App;

If you check out the rendered component using your browser’s dev tools, you will see that there no extra node was inserted into the DOM.

Console view using Fragments

This is my preferred way of rendering multiple elements from a React component because, according to Dan Abramov, it’s faster and uses less memory than container divs. It also makes it easier to work with CSS layout techniques such as Grid and Flexbox where having extra markup can have an impact on the layout.

Not starting component names with a capital letter

All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a
or a . This is because of the way JSX works.

In JSX, rendering a component that begins with a lowercase letter compiles down to React.createElement('component'), the equivalent of an HTML element. For example, let’s say you have a button component that returns a simple button element, this will not work as expected.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class button extends Component {
  render() {
    return <button className="App-button">Yo!</button>;
  }
}

ReactDOM.render(<button />, document.getElementById("root"));

Instead of rendering your

Did you like this article?

Isaac Godwin Udofia

See other articles by Isaac

Related jobs

See all

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
hello@works-hub.com

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2024 WorksHub

Privacy PolicyDeveloped by WorksHub