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

avatar

Borislav Hadzhiev

Wed Oct 20 20211 min read

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee