state' is not defined no-undef in App.js file

Question

whenever i declare state in App.js file in my react.js project i get error state' is not defined no-undef and also getting this error while declaring functions.

i have looked for various place for solution but don't get the solution.

import React from "react";
import logo from "./logo.svg";
import Counters from "./components/counters";
import Navbar from "./components/navbar";
import "./App.css";
function App() {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };
  handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState(counters);
  };

  incrementHandle = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counter[index].value++;
    this.setState({ counters });
  };

  return (
    <React.Fragment>
      <Navbar />
      <main className="container">
        <Counters
          counters={this.state.counters}
          onIncrement={this.incrementHandle}
          onDelete={this.handleDelete}
          onReset={this.handleReset}
        />
      </main>
    </React.Fragment>
  );
}

export default App;

./src/App.js Line 7: 'state' is not defined no-undef Line 15: 'handleDelete' is not defined no-undef Line 19: 'handleReset' is not defined no-undef Line 27: 'incrementHandle' is not defined no-undef

Answer 1

We both watched the YouTube React tutorial and followed up on the syntax. The producer makes this React using an old version, and you may use a brand-new one.

New React default app.js inside recommend "function App() {..."

My solution is to replace it with "Class App extends Component{" on your above line 7.

it will be working.

Answer 2

If you want to use state in React Function Component you need hooks. Your component will look something like this when using hooks:

import React, { useState } from "react";  // import useState too
import logo from "./logo.svg";
import Counters from "./components/counters";
import Navbar from "./components/navbar";
import "./App.css";

function App() {
  // useState function returns an array with two items. First is your state object (similar to `this.state`)
  // and second is a function to update the state object, ie. the first item of array (similar to `this.setState`, but with minor changes, see react docs for more info, linked above)
  const [counters, setCounters] = useState([  // useState to set initial counter value
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]);

  // use setCounters method to update the counters state 
  const handleDelete = counterId => setCounters(counters => counters.filter(c => c.id !== counterId));

  const handleReset = () => setCounters(counters => counters.map(c => {
    c.value=0;
    return c;
  }));

  const incrementHandle = counter => {
    const counters_copy = [...counters];  // rename to counters_copy to avoid having global and local counters variable name conflict
    const index = counters_copy.indexOf(counter);
    counters_copy[index] = { ...counter };
    counter_copy[index].value++;
    setCounters({ counters_copy });
  };

  return (
    <React.Fragment>
      <Navbar />
      <main className="container">
        <Counters
          counters={counters} // no need of this.state
          onIncrement={incrementHandle}  // no need to this
          onDelete={handleDelete}  // no need to this
          onReset={handleReset}  // no need to this
        />
      </main>
    </React.Fragment>
  );
}

export default App;

Or use can use a class component instead of function and use state old way(without hooks).

// imports stays the same
...

class App extends React.Component {  // convert to class
constructor(props){
  super(props);
  this.state = {  // initial state in constructor
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  ...
  // handler functions stays the same

  render(){  // return goes inside render function
    return (...);  // contents of return stays the same
  }
}

export default App;
// don't actually write ... , it just means what you had in your question the code stays same

Hooks can't be used in class components and this.state can't be used in function component.
So if your component is:
function -> use hooks, i.e. useState, useRef etc.
class -> use this.state and this.setState

Also function components has better performance and code minification, so I recommend using that. Your app will perform better and will have smaller bundle size.

Answer 3

I got mine to work by changing it to a class extends component. you have to 'imrc' and I commented out the 'imr'. Mosh's workspace is already setup like this when he clicks on App.JS so I wonder if that's what the old App.JS used to look like by default?

Replace - function App() { with - class App extends Component {

also, add render {} for the class

along with above changed also replace - import React from "react";

with - import React, { Component } from "react";

at the top of the imports.

Hope it will fix your error, since its works for me.

Answer 4

Are U using React Hooks, because functions by default are dumb/stateless components and therefore do not have any state by default. I have never used hooks before but I can definitely checkout the the documentation to help you out. However you can convert the functional component into a class based component to make your life a lot easier rather than using hooks.