Current React JS : 'state' is not defined no-undef

Question

I am learning ReactJS and I came across this error 'state' is not defined no-undef Your assistance on where am going wrong. I have the current React "react": "^16.8.6". I tried adding in this.state instead I got: Line 1: 'Component' is defined but never used no-unused-vars Line 8: Do not mutate state directly. Use setState() react/no-direct-mutation-state Line 8: Do not mutate state directly. Use setState() react/no-direct-mutation-state

App.js

import React, { Component } from 'react';
import './App.css';
import Todos from './Components/Todos';



function App() {
  state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;

Answer 1

Replace function App() { with class App extends Component{ . That will get you going in the right direction, and wrap the return in a render method, like so:

class App extends Component{
  state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  render(){
    return ( 
      <div className="App">

        <h1>Hello</h1>
        <Todos/>
      </div>
    );
  }
}

export default App;

Answer 2

You can simply use React hooks. Append the state with React so you have React.state .

import React, { Component } from 'react';
import './App.css';
import Todos from './Components/Todos';



function App() {
  React.state = {
    todos:[
      {
        id:1,
        title: "Study File Structure",
        completed:false
      },
      {
        id:2,
        title: "Create Component",
        completed:false
      },
      {
        id:3,
        title: "Study State",
        completed:false
      }
    ]
  }

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;

Now when you need to call anything from the state, classes use this.state.todos but in your case, use React.state.todos

Let me know if this helps. :)

Answer 3

This work perfectly for react 16

import React from 'react';

import './App.css';

//Components
import Person from './Person/Person'

function App() {
   React.state = {
     persons: [
       {name: 'Max', age: 28},
       {name: 'Manu', age: 23},
       {name: 'Jecinta', age: 22},
     ]
   }


  return (
    <div className="App">
     ...
    </div>
  );
}

export default App;

Answer 4

If you are using React 16.8 or higher, you may want to use the React Hook 'useState' to resolve the problem. As you have noticed when creating the React application for the first time, the App.js class starts with

function App(){
}

as opposed to

class App extends Component {
}

that you would see on the older version of React. As suggested on the answer that is marked as the best answer, this solution should still work. That was the only one way to manage state on React. From react version 16.8+, you have the options of managing the states of the application by using react Hook 'useState', which works better when using the functional components as opposed to the class. As a matter of facts, there are many other hooks available that you can use for some different purpose and many of them begins by the prefix 'use...'.

Therefore, if your organization prefers you to use the class based components, use it and continue using 'state'. But if you have control over the application so you can use either class based components or functional based, use whichever you prefer.

Now to answer the question above, first import the hook 'useState' like below:

 import React,  { useState } from 'react';

then instead of using

state {
      todos:[
     ...
     ]

the code should look like:

const [currentState, setNewState] =  useState({
 todos:[
  {
    id:1,
    title: "Study File Structure",
    completed:false
  },
  {
    id:2,
    title: "Create Component",
    completed:false
  },
  {
    id:3,
    title: "Study State",
    completed:false
  }
]

 });
      }

the 'useState' returns an array of exactly 2 elements. The first element is the current state, and the second element is a function that allow you to update the state. For example if you would like to access the title of the first element it should look like this 'currentState.todos[0].title'

If you would like to update the title, you would use the second element of the array

For more information about React Hooks, please click on the link below: https://reactjs.org/docs/hooks-intro.html

Answer 5

You should use React Class Component or useState hook .

Try this one:

import React, { useState } from 'react';
import './App.css';
import Todos from './Components/Todos';


function App() {
  const [ todos, setTodos ] = React.useState([
    {
      id:1,
      title: "Study File Structure",
      completed:false
    },
    {
      id:2,
      title: "Create Component",
      completed:false
    },
    {
      id:3,
      title: "Study State",
      completed:false
    }
  ]);

  return ( 
    <div className="App">

      <h1>Hello</h1>
      <Todos/>
    </div>
  );
}

export default App;