TypeError: Cannot read property 'state' of undefined. Updated React

Question

I'm very new to react so I'm just following youtube video but I got this error and I don't know anything about this. Terminal showing 'Compiled Successfully' but I'm getting this error. This is my App.js code

import Todos from './components/Todos';
import './App.css';

function App() {
  React.state = {
    todos: [
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ]
  };
  return (
    <div className='App'>
      <Todos todos={this.state.todos} />
    </div>
  );
}

export default App;

and this is my Todos.js code


function Todos() {
  return this.props.todos.map(todo => <h3> {todo.title} </h3>);
}

export default Todos;

According to video lecture browser must be showing all the todos but I'm getting this error

You are creating a functional component and trying to access this property, which is the property of class component. so this.state will throw error. — Akhil Aravind
– Akhil Aravind, Commented Feb 11, 2020 at 7:10

Rojen · Accepted Answer · 2020-02-11 07:28:33Z

2

As @Akhil Aravind pointed out you are trying to access this in functional component, which is the property of class. Try this:

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

class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ]
  };
render(){
return (
    <div className='App'>
      <Todos todos={this.state.todos} />
    </div>
  );
}

}

export default App;

function Todos(props) {
  return props.todos.map(todo => <h3> {todo.title} </h3>);
}

export default Todos;

Hope this solves.

edited Feb 11, 2020 at 7:28

answered Feb 11, 2020 at 7:11

Rojen

3461 gold badge2 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Akhil Aravind Over a year ago

please update the app component also, there are sill issues in the app component. He is trying to access this.state, which still throws error

Sodnarts Over a year ago

It will not solve it, and it's not even answering the question he had. He has problems with state of undefined, not props of undefined, look in the first component, there he is passing the props with this.state, and using state like you would in a classic class component, and not through functional components hooks. That is what is giving him the error message he asks for

Rojen Over a year ago

did not saw that

Sodnarts Over a year ago

@AkhilAravind I know, I was commenting towards the post itself, and the question of why it will not solve it, but with a bit more details

Julian Kleine Over a year ago

@Rojen this does not qualify as an answer, nowhere is mentioned that todos comes from the props. See answer from Sodnarts

|

Sodnarts · Accepted Answer · 2020-02-12 07:57:31Z

2

You are using a functional component, whilst using the syntax of a class component for state. This will not work.

There is two options for fixing this:

First one would be the easiest since most of your code is written with class component syntax -- Change it to a class component.

class App extends React.Component {
  state = {
    todos: [
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ]
  };

   render() {
      return (
         <div className='App'>
             <Todos todos={this.state.todos} />
         </div>
      );
   }
}

export default App;

Or you can change the state to the one of a functional component:

App.js

import Todos from './components/Todos';
import './App.css';

function App() {
  const [todos, setTodos] = React.useState([
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ])
  return (
    <div className='App'>
      <Todos todos={todos} />
    </div>
  );
}
export default App;

Todos.js

function Todos({todos}) {
  return todos.map(todo => <h3> {todo.title} </h3>);
}

export default Todos;

Using these two above files should resolve your issue completely.

edited Feb 12, 2020 at 7:57

answered Feb 11, 2020 at 7:15

Sodnarts

3712 silver badges11 bronze badges

2 Comments

Vipul Sinha Over a year ago

The same error is occurring again.I'm literally very confused. Please explain again.

Sodnarts Over a year ago

Hi, I added the Todos.js, if you use both the component marked as App.js, and Todos.js as stated above it works perfectly, I have tested it

akhtarvahid · Accepted Answer · 2020-02-11 07:28:00Z

1

Either you pass props or directly use destructuring.

// using props if it's functional component
function Todos(props) {
  return props.todos.map(todo => <h3> {todo.title} </h3>);
}

or

// using destructuring
   function Todos({todos}) {
    return todos.map(todo => <h3> {todo.title} </h3>);
  }

if it's functional component use props.todos. if class based component use this.props.todos

As i can see - you need to define hooks or class based component to define state

// Hooks
function App() {
  const [todos, setTodos] = React.useState([
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ])
  return (
    <div className='App'>
      <Todos todos={todos} />
    </div>
  );
}

Class based

class App extends React.Component {
  state = {
    todos: [
      {
        id: 1,
        title: "Pay the rent",
        completed: false
      },
      {
        id: 2,
        title: "Dinner at Pappu",
        completed: false
      },
      {
        id: 3,
        title: "CODROBO Meeting",
        completed: false
      }
    ]
  };
  render() {
    return (
      <div className="App">
        {this.state.todos.map(todo => (
          <h3>{todo.title}</h3>
        ))}
      </div>
    );
  }
}

edited Feb 11, 2020 at 7:28

answered Feb 11, 2020 at 7:17

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

4 Comments

Sodnarts Over a year ago

That would fix one of the issues. But it is not the error he is asking for, but the one that would appear after fixing the problem he asked for. He is asking for state of undefined, which is where ha passes the props, since that also is a functional component, and he is using this.state there.

Sodnarts Over a year ago

When I commented, I did not mean copy-paste my answer into yours.

akhtarvahid Over a year ago

@Sodnarts excuse me i didn't see your solution even comments ok.

Vipul Sinha Over a year ago

using destructing really worked. Thanks @VahidAkhtar

Ryan Pace · Accepted Answer · 2020-02-11 08:32:29Z

from your program, there seems to be a slight error in the writing state. you can see in my example down below or in here. I hope this helps :)

// App.js
import React, { useState } from "react";
import Todos from "./Todos";

export default function App() {
  const [todos] = useState([
    {
      id: 1,
      title: "Pay the rent",
      completed: false
    },
    {
      id: 2,
      title: "Dinner at Pappu",
      completed: false
    },
    {
      id: 3,
      title: "CODROBO Meeting",
      completed: false
    }
  ]);
  return (
    <div className="App">
      <Todos todos={todos} />
    </div>
  );
}

// Todos.js
import React from "react";

function Todos({ todos }) {
  return (
    <React.Fragment>
      {todos.map((item, i) => (
        <div
          style={{
            background: "blue",
            margin: "10px",
            padding: "10px",
            color: "white"
          }}
          key={i}
        >
          <p
            style={{
              background: "red",
              width: "18px",
              borderRadius: "50%",
              padding: "5px"
            }}
          >
            {item.id}
          </p>
          <h3>{item.title}</h3>
        </div>
      ))}
    </React.Fragment>
  );
}

export default Todos;

user10070377 · Accepted Answer · 2020-02-11 07:14:02Z

0

In your Todos function you need to have your props from App and also since Todos is is a functional component, you don't need to use this keyword

function Todos(props) {
      return props.todos.map(todo => <h3> {todo.title} </h3>);
    }
    
    export default Todos;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

answered Feb 11, 2020 at 7:14

user10070377

Collectives™ on Stack Overflow

TypeError: Cannot read property 'state' of undefined. Updated React

5 Answers 5

7 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related