Skip to content
Advertisement

function scope error in React. Cannot read property of undefined

I am new to React and javascript so please bear with me

I am building a basic todolist app

Main App.js is the following

JavaScript

My TaskList.js component looks like the following

JavaScript

Yet, I’m getting the following error

JavaScript

I am aware of bindings and I’ve tried several approaches (using this.functionName.bind(this) in the constructor and the arrow function approach) however I’m not able to resolve the issue. Any help would be much appreciated.

Advertisement

Answer

First option you are invoking a function before hand. Second option you are passing a function that uses a task variable that it doesn’t exist.

you are passing down a function to TaskList, for that you should pass the function directly, or define it as arrow function you should define the task parameter:

JavaScript

Edit as @Nadia Chibrikova points at your TaskList you should also fix your onClick correctly:

JavaScript
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement