React Common Errors

In my experience while working with any technology, I believe there is always a standard set of common errors which we keep running into often. It will be helpful to have a consolidated list to look up and quickly know what the error is about. This is especially of extreme help to developers getting aboard on the journey of software development ; they can save some time in breaking their heads around an error and googling away to find a suitable match.

I have put together this common error list from my React-Redux experience of development and training.

  • this.something is undefined

The most common one- this is not getting the correct value. This happens when the this keyword is not pointing correctly and unable to find its value, mostly in a method inside the component class.

  1. Use ES6 arrow function to define your method, which ensures this points to the current instance.
  2. Use bind to explicitly bind this to the current instance in the constructor.
    1. this.methodname.bind(this);

  • The dom element added to the dom is not getting rendered

The jsx code was added but its not appearing on my page.

The added jsx code must be added to the JSX which is part of the final return statement(for class component, within render method) of the React Component. If there is conditional rendering, then check the condition to be truthy for the content to be rendered.

  • The state change is not re-rendering the DOM and not showing the changed state

The state is mutated.

The state should not be mutated, instead a new copy of the state should be created with the updates. For arrays and objects, use the spread operator to create a new copy and make changes to it. Also you can use concat for arrays and  

  • react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}).

When you are trying to access an object like a normal variable. Try destructuring to get a specific value from the object.

  • Using class instead of className.

This is the most obvious one and can be rectified by replacng class with className.

  • Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. 

Start by checking all the exports and imports. If the default and named exports are imported in the proper way as shown.

Default Export: The single default export from every file.

export default App;// Inside App.js

import App from ‘./App’ //Used to import default

Named Export : Any additional export in the same file, as every file can have only single default export.

export const API_KEY =’hdbsyfdggjnh967585436′;// Inside Axios.js

import {API_KEY} from ‘./Axios’; // Used to import named exports using {}

CONCLUSION

In this blog, I have tried to consolidate the React common errors.

Will update this blog with more errors as I find some other common ones. Do suggest if you faced any errors which can make up to this list.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s