question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

new react apps state is undefined on class based component without a constructor

See original GitHub issue

Describe the bug

Using state on a class based component without a constructor and creating methods will not compile because they are undefined. Using the EXACT same code in a react app I created over the weekend, it compiles and runs fine. Trying to create a new react app via ‘npx create-react-app <projectname>’ will not compile.

Did you try recovering your dependencies?

Yes I tried removing node_modules and creating new react apps via ‘npx create-react-app test’ numerous times

Which terms did you search for in User Guide?

State undefined class based component

Environment

It was not copies to my clipboard directly so heres my copy paste: Environment Info:

current version of create-react-app: 4.0.3 running from /Users/joseph/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System: OS: macOS 11.1 CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Binaries: Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node Yarn: Not Found npm: 7.5.6 - ~/.nvm/versions/node/v14.15.4/bin/npm Browsers: Chrome: 88.0.4324.192 Edge: Not Found Firefox: 85.0.2 Safari: 14.0.2 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.3 => 4.0.3 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. npx create-react-app test
  2. create a class based component
  3. initialize state without the use of a constructor or write an arrow function.

Expected behavior

State would be initialized and my app would compile

Actual behavior

state is undefined. method is undefined. screenshot

Reproducible demo

I do not have the time at the moment to upload a link to a project. I will try to get a repo up soon if you need

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:22
  • Comments:15

github_iconTop GitHub Comments

7reactions
Thirunavukkarasucommented, Feb 23, 2021

We are having the same issue not only for class component without constructor it is happening even with constructor as well. Please kindly notify if there are any workaround.

2reactions
median-mancommented, Feb 23, 2021

Issue got fixed now automatically without any code change. While doing yarn build and yarn start it is working fine now. Thanks!

Same

Read more comments on GitHub >

github_iconTop Results From Across the Web

React.js State is not defined in class component - Stack Overflow
I am using a class component without a constructor to initialize state. Today, every react app i have tried to create has given...
Read more >
How To Fix Undefined 'this.state' in React Class Components
Solution 1: binding in the constructor · Solution 2: binding in the event handler · Solution 3: change methods to arrow function class...
Read more >
How to add Stateful component without constructor class in ...
Generally, we set the initial state of the component inside the constructor class and change the state using the setState method. In React...
Read more >
React.Component
The render() method is the only required method in a class component. When called, it should examine this.props and this.state and return one...
Read more >
React State without Constructor - Robin Wieruch
In React, state is used in a React class component. There you can set initial state in the constructor of the class, but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found