How to troubleshoot React errors

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 component, React ignores it and renders a vanilla element instead because the button component is not capitalized when referenced in ReactDOM.render().

If your component name is not a valid HTML tag, such as you’ll get a warning in your browser console:

Console error when name not capitalized

This problem is easily avoided by beginning all component names with a capital letter. Here’s an example that provides the correct output:

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"));

Name correctly capitalized

Not binding class methods in event handlers

When working with React components, you can define class methods within the component and use them in the component’s render function.

import React, { Component } from "react";

class App extends Component {
  sayName(name) {
    return name;
  }

  render() {
    return `Hello ${this.sayName("Ayo")}`;
  }
}

export default App;

This above code will work just fine because React makes sure this refers to the instance of the class.

However, when you reference a class method from an event handler, such as onClick, the class methods lose their this bindings so you cannot this.state, this.props or this.setState() unless you re-bind them.

For example, the code sample below will not work as expected. When you try to update the form, you get an error with a message that says “this is undefined”.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: ''
    };
  }

updateAge(event) {
    this.setState({
      age: event.target.value
    });
  }

render() {
    return (
      <form>
        <input onChange={this.updateAge} value={this.state.age} />    
      </form>
    )
  }
}

Type error

There are quite few approaches you can take to solve this problem. One way is to bind wrap the methods in an arrow function like this:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: ""
    };
  }

  updateAge(event) {
    this.setState({
      age: event.target.value
    });
  }

  render() {
    return (
      <form>
        <input
          onChange={event => this.updateAge(event)}
          value={this.state.age}
        />
      </form>
    );
  }
}

Or you can just bind them in the constructor function as shown below:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: ""
    };

    this.updateAge = this.updateAge.bind(this);
  }

  updateAge(event) {
    this.setState({
      age: event.target.value
    });
  }

  render() {
    return (
      <form>
        <input onChange={this.updateAge} value={this.state.age} />
      </form>
    );
  }
}

A more elegant solution is to utilize the class property syntax and just use an arrow function for the methods. At the time of writing, the class property syntax is not yet part of the official ECMAScript spec yet (stage-3) so you’ll need to utilize Babel’s class properties transform plugin in your project.

If you’re using create-react-app to bootstrap your projects, it already has the class properties transform plugin enabled, so the following should work just fine.

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: ""
    };
  }

  updateAge = event => {
    this.setState({
      age: event.target.value
    });
  };

  render() {
    return (
      <form>
        <input onChange={this.updateAge} value={this.state.age} />
      </form>
    );
  }
}

export default App;

Accessing state before it is updated

Using setState can be problematic for beginners to React due to its asynchronous nature. Since setState() does not always immediately update a component, reading this.state right after calling setState() is a potential pitfall.

The React docs describes this concept in greater detail:

Think of setState() as a request rather than an immediate command to update the component. For better-perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

Here’s an example that illustrates this:

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  updateCheckbox = event => {
    this.setState({
      checked: !this.state.checked
    });
    console.log(this.state);
  };

  render() {
    return (
      <form>
        <label>
          Checkbox:
          <input
            onChange={this.updateCheckbox}
            type="checkbox"
            value={this.state.checked}
          />
        </label>
      </form>
    );
  }
}

export default App;

Accessing state

As you can see from the gif above, logging the state object immediately after the call to setState() returns the previous state instead of the updated state. This is because, by the time the console.log() statement is invoked, setState() hasn’t done its job yet.

If you need to access the state object immediately after updating the state, you can pass in a callback function to setState. The callback is guaranteed to fire after the update has been applied so you’ll always get the latest state object.

this.setState(
  {
    checked: !this.state.checked
  },
  () => {
    console.log(this.state);
  }
);

You can also use the componentDidUpdate lifecycle hook which is also certain to be invoked immediately after updating occurs.

If you need to set the state based on the previous state and props, you can use the following pattern:

this.setState((previousState, currentProps) => {
    return { ...previousState, name: currentProps.name };
});

Here, setState receives the previousState and currentProps as arguments so you can use them to construct the next state. The return value of this function is merged with the existing state to form the new state.

Not closing element or component tags

In HTML, there is the concept of self-closing tags. These tags do not enclose any content so you can just leave them open or use a closing backslash in the opening tag. Some examples are ,
e.t.c.

JSX, on the other hand, requires that all elements must be closed, either with the self-closing format or with a corresponding closing tag. This also applies to React components: , and is valid but isn’t.

Not closing element tags

Wrap up

React is intuitive for the most part, but there are quite a few stumbling points which might catch you by surprise. If you keep in mind the biggest problems when working with React, you’ll know how to fix them without breaking a sweat.