This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/todolist.htm

You are right in that an arrow function would be more concise. There isn’t a right or wrong way, but I think I will revise this content in the future to just use arrow functions. I wrote a bit about this here: React, Class Syntax, and Autobinding Shenanigans!

@jersoe You might also be interested in reading Arrow Functions in Class Properties Might Not Be As Great As We Think which talks about some of the differences and why using arrow functions isn’t always a good thing.

I tried to redo the Todo List App with functional components today. The one problem that I have is that the component is not refreshed after the submit method (addItem) is called. So the items do not get shown from the TodoItems component. I am not sure what I did wrong or missed.

Hi @ksanders - can you share your code? It’s hard to know what may be going on there :slight_smile:

Yes. This is my version of the TodoList.js using functional components. I have also included the TodoItems.js as reference. It is using a class component as you did in the tutorial. I have not converted it yet. import React, { useState, useRef } from 'react' import TodoItems from './TodoItems' con…

Thanks for the code! Does your items array contain an accurate list of the tasks added? If you add a console.log call to createTasks in TodoItems, does it get called for each task added as well?

Yes sir. I just verified that that the items array in the state does have the accurate list each time I add a new task. I added a console.log() in the createTasks call in TodoItems, but it never gets called when I add a task. It is as if the TodoList component is not refreshing on submit.

This is a bit puzzling. Can you replace <TodoItems entries={items} /> with <TodoItems entries={setItems(items)} /> Does that make the example work?

Hello kirupa, why do we need to bind createTasks function, as this function doesnt use any React state? class TodoItems extends Component { constructor(props) { super (props); this .createTasks = this .createTasks.bind( this ); } createTasks(item) { return <li onClick={() => t…

Hi @nishaanth_vikram - you are right. If it works without the binding, then it is just an oversight on my part. Something for me to revise in a subsequent edition :slight_smile:

Building an Awesome Todo List App

programming

senocular December 17, 2021, 6:50pm 124

This seems like a culprit. You’re setting items to a toString of the prevState items. Doing this means its no longer an array, rather a string.

Topic		Replies	Views
React Help with todo list Uncategorized	2	753	November 5, 2018
14. Building a Todo List App in React Uncategorized	1	477	August 16, 2019
Building a Todo List App programming	4	704	June 21, 2019
React - todolist - deleting web dev	3	483	July 21, 2022
Spot the bug - #110: Todo List web dev	2	20	August 9, 2026

Building an Awesome Todo List App

Follow:

Popular

Loose Ends

Building an Awesome Todo List App

Related topics

Follow:

Popular

Loose Ends