3

I use a tutorial to learn React and I got stuck pretty quickly. In the tutorial they use this code:

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <React.Fragment>
        <span>{this.state.count}</span>

        <button>Increment</button>
      </React.Fragment>
    );
  }
}

export default Counter;

And everything works great.

But in my case, I get this error:

src\components\counter.jsx Line 4:3: ‘state’ is not defined no-undef Search for the keywords to learn more about each error.

After trying everything, I think it's because of the react version (They use an older version).

So my question is how to fix this error, And what has actually changed between the versions that prevents my code from working. Tnx!

Just Want To Learn
  • 37
  • 1
  • 6
  • where and how you have import Counter component.? – Jayesh Naghera Feb 24 '21 at 06:53
  • You code runs fine here in this [codesandbox](https://codesandbox.io/s/immutable-tree-fgwcx). Can you clarify what you mean by "changed between versions"? Versions of what? – Drew Reese Feb 24 '21 at 06:54
  • @JayeshNaghera in the index.js "import Counter from "./components/counter";" – Just Want To Learn Feb 24 '21 at 07:08
  • @DrewReese In the tutorial they use an older version of react – Just Want To Learn Feb 24 '21 at 07:10
  • I think this is a recent issue with `create-react-app` as I've only started seeing a bunch of posts last day or so. I (or you can fork and play) can bump the React version back to v16.x in my linked sandbox and the code will still be valid and work. What tutorial are you working from? Can you link it in your question so we've better context to what you are trying and doing? – Drew Reese Feb 24 '21 at 07:16
  • I wish, this is a paid tutorial @DrewReese – Just Want To Learn Feb 24 '21 at 07:34
  • 1
    Well, I guess for now use a constructor so you can keep moving forward, but with the understanding that it isn't a requirement unless you need to reference any passed props as part of the initialization process (see [this](https://stackoverflow.com/questions/44684481/is-the-constructor-still-needed-in-react-with-autobinding-and-property-initializ) SO post). I suggest getting (very) familiar with the component lifecycle and moving on to functional components and React hooks, life will be better. Good luck. – Drew Reese Feb 24 '21 at 07:48

4 Answers4

1

This is an issue not related to react itself but projects created using create-react-app I believe. The ongoing issue is discussed in comments and it has worked for some people by simply re-using the command itself to create a new project but still a comment by maintainers is awaited. So it's not something you did wrong. Chill.

I have been tracking this since yesterday and even tweeted about the same. Some dependency might have been messed up. Probably eslint or one of babel plugins.

The link to the issue - https://github.com/facebook/create-react-app/issues/10598

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
  • Interesting, I tried to figure out how to fix it (from the link you sent) but I did not understand. run "npx build"? – Just Want To Learn Feb 24 '21 at 07:28
  • @JustWantToLearn There are two things mentioned there - Either try creating a new app again using `npx create-react-app` or run `yarn start` on existing one to see if it works. I wish I can help you with more than that but keep an eye on this thread for any updates. – Lakshya Thakur Feb 24 '21 at 07:39
1

I ran into the same problem. I was using the wrong version. The documentation below provided me instructions to create a new react app, for the new version. Now I fixed the issue.

https://create-react-app.dev/docs/getting-started/

cantstopcoding
  • 11
  • 1
0

Put state in constructor:

  constructor(props) {
    super(props);
    this.state = {
       count: 0,
  
  }
Predrag Davidovic
  • 1,411
  • 1
  • 17
  • 20
  • 3
    Constructors are not required in React components. – Drew Reese Feb 24 '21 at 06:55
  • Thanks Drew, can you explain me what is difference. We use it in constructor when we want to have initial value (which we can change when call/initialise class) of object when we initialise class ( let myCounter = new Counter(10) ). On this way we can give value 10 to newly created object. Without constructor we can’t do it in initialisation phase. What is difference and when we use it without constructor. Do we use one without constructor when we don't want to pass new value to initialised component. Can you give me example when to use which? Thanks in advance :) – Predrag Davidovic Feb 24 '21 at 07:04
  • It did work, but what has changed? Why in the past it worked and now not? In the next step, I need to add the following code: style = { fontSize: "10px", }; It also goes into the same constructor? – Just Want To Learn Feb 24 '21 at 07:05
  • You don't need a constructor to initialize React state, see my linked codesandbox in OP comment above. Before arrow functions you needed to bind `this` to any functions that referenced the `this` of the component, i.e. if they needed to `this.setState(.....)` or access `this.state`. Arrow functions bind `this` of the caller for you, automagically. – Drew Reese Feb 24 '21 at 07:13
  • I know about `this` but we do not use constructor only to bind functions. With constructor you have possibility to give new values when calling class with new ( new Counter(10)). – Predrag Davidovic Feb 24 '21 at 07:19
  • We don't call `new` on React components, nor invoke them, we pass them, *as **JSX***, to React and React manages the entire lifecycle, including creation. They may be class objects but we're delegating everything to React. – Drew Reese Feb 24 '21 at 07:22
  • You have right about that :) I thought about ordinary classes when I spoke in context of constructor. – Predrag Davidovic Feb 24 '21 at 07:24
  • Drew Reese maybe you have right about that, I found it on some blog post. But it is confusing cause in official documentation they say we use constructor to initialise state, and that is what he is doing with count: 0. This is from React official documentation: **If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component**. But he is actually initialising state. – Predrag Davidovic Feb 24 '21 at 07:30
  • @PredragDavidovic Ok, you've got me since I also am unable to find anything related to this in the current docs, but I assure you a constructor isn't a strict requirement. See this [SO post](https://stackoverflow.com/questions/44684481/is-the-constructor-still-needed-in-react-with-autobinding-and-property-initializ)... basically, constructor is only required if you need to reference any passed props as part of initializing the component. – Drew Reese Feb 24 '21 at 07:44
  • Yeah, it is confusing a little bit. I'm working as React Dev for 3 years and I use them in class components. And you wrote we do not need them, and I was like: "Did I do it in wrong way all the time?". Then fond it on official documentation that we need them, but also find in some blog post examples without constructor. It is a little bit confusing but probably you have right it can be without constructor, but only issue with that it is not working. (I'm joking in las part of this sentence) :) – Predrag Davidovic Feb 24 '21 at 07:48
0

Since Constructor is not initialized, the state you are assigning a keyword in React, which is why it's coming as an error.

Fix for your code like this by adding constructor -

constructor(props) {
   super(props);
   this.state = { count: 0 };
}

For more information, refer - Counstructor in React Class Component

aakanksha_02
  • 41
  • 5
  • `state` isn't a keyword, it's just an object and class property. Constructors aren't required in React class-based components (see other conversation). – Drew Reese Feb 24 '21 at 07:29