Fix - Cannot set property 'props' of undefined in React.js

avatar

Borislav Hadzhiev

Last updated: Oct 20, 2021

banner

Check out my new book

Fix - Cannot set property 'props' of undefined #

The "cannot set property 'props' of undefined" error occurs when we add an extra set of parenthesis when declaring a class component in React.js. To solve the error, remove the parenthesis after Component in your class declaration, e.g. class App extends Component {}.

typeerror cannot set property props of undefined

Here is an example of how the error occurs.

App.js
import React, {Component} from 'react'; // 👇️ Notice extra set of () after Component class App extends Component() { render() { return <div>Example</div>; } } export default App;

We placed an extra set of parenthesis when trying to extend from the Component constructor and got the error back.

To solve the error, you have to remove the parenthesis after Component when declaring a class component.

App.js
import React, {Component} from 'react'; // ✅ Works class App extends Component { render() { return <div>Example</div>; } } export default App;

The reason the error occurred is because we were invoking the Component constructor as a function, in which case the this keyword would be equal to undefined.

And when the following line runs, trying to set the props property on an undefined value throws the error.

// 👇️ `this` was `undefined` here this.props = props;
This behavior is not specific to React.js and this is the exact way things work in JavaScript as well.

When extending a class or constructor function (which is essentially the same thing), make sure to not add an extra set of parenthesis because you would invoke the class and get the error.

Use the search field on my Home Page to filter through my more than 3,000 articles.