Require Help with the react todo tutorial

Hello, I’m currently working through the react todo list tutorial and have made it to more or less the end, having implemented conditional rendering and every major feature save editing and filtering.

In trying to implement editing I’ve run an issue, it breaks my code but mostly it makes me think I don’t understand react/nextJS imports:
Specifically how does Todo.js utilize functions written in App.js.
When Todo.js references an App.js function inside of an arrow function such as using deleteTask on line 93 of the official repo it works fine, even in my code.

       onClick={() => props.deleteTask(}

However when I tried writing the handleSubmit function I receive 2 errors:

Even when I wholly replace the editTask function in App.js and the HandleSubmit function in Todo.js with the working version from the repo I get the same issue. I understand I have the same problem A.S.J. had in this stackoverflow thread but I’d like to know where I went wrong and what’s a better practice to prevent this in the future. Specifically how does the official repo use editTask outside of an arrow function and where have I erred. More generally why can I call deleteTask or editTask from Todo.js. Because they’re children of App.js? How does the flow of information work?

More info/code can be provided though it follows the tutorial code and official repo quite closely.

Hi @dock_side_of_the_moon and welcome to the community :wave:

I’m sorry you haven’t received any answer to your questions. Unfortunately there aren’t many React developers around here, me included. I don’t know if you have solved your problem, yet. If you have it would be good to write the answer down, so we could build up some knowledge.
If not here’s my take to tackle such problems:

I’m a Vue.js developer and from that I know that there are situations were using an arrow function feels natural, but leads to problems with this. (This could also be the other way round like in your linked StackOverflow question.)

What I would do to get to the source:

  • Replace the whole App.js and Todo.js with the version in the MDN repo. If that works:
  • Replace just the relevant parts of App.js with the MDN versions: editTasks(), tasklist (whole part where <Todo> gets added)
  • Replace in Todo.js: handleSubmit() and where it’s used (onSubmit={handleSubmit})
  • Narrowing down the place of the error by further using your own code instead of the tutorial code until it brakes.

This should eventually get you to the line(s) with the problem. Remember there are two components playing together and the error doesn’t necessarily have to be on the exact line in the error message.

The interaction happens over the properties of the <Todo> component you integrate in App.js (lines 60-72). That’s why they are available on the props object inside Todo.js.

I hope this will get you further and my apologies that I can’t give you just a pointer to the exact error. :neutral_face:

Have a nice day,

1 Like

Hey @dock_side_of_the_moon, do you have your version of the app somewhere we can see? Perhaps on GitHub or perhaps Codesandbox? Let me know, thanks!

Staff Community Manager - MDN Web Docs