# Building an Awesome Todo List App

**URL:** <https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214>\
**Category:** programming\
**Created:** [March 20, 2017, 3:22am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214 "2017-03-20T03:22:50Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Elizabeth\_Amanda](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/elizabeth_amanda/32/8778_2.png) [@Elizabeth\_Amanda](https://forum.kirupa.com/u/Elizabeth_Amanda)\
**Post date:** [November 9, 2017, 3:29pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/83 "2017-11-09T15:29:39Z")

</div>

thank you @senocular, I definitely have a lot more to learn!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 25, 2018, 7:06pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/85 "2018-11-25T19:06:04Z")

</div>

That’s a good question 😛

The easiest approach would be to set the `contenteditable` attribute on the element when you click. After making the change, you update the state with the new value.

You can read more about this attribute here: [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable\_content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content)

Does this help? I can try to put together an example, but I am a bit swamped this week.

😀

---

<div class="post-metadata">

**Author:** ![theorios](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@theorios](https://forum.kirupa.com/u/theorios)\
**Post date:** [November 25, 2018, 7:39pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/86 "2018-11-25T19:39:13Z")

</div>

I’m trying to edit it in the same input that it was submitted.  
I already am able when i click on it to see its value in the input field. But when i press add, it adds new item instead of updating the old one. That’s where i’m stuck.

If you look the code, i guess that i need a way in addColor to check if it’s key exists, to update that item. Any thoughts on that?

```
addColor(c) {
    // check for valid hex code with regex
if (this.state.color.match(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i)) {
  console.log('Hex ok');
  var newColor = {
    text: this.state.color,
    key: Date.now(),
  };

  this.setState((prevState) => {
    return {
      colors: prevState.colors.concat(newColor)
    };
  });
} else {
  console.log('Hex NOT ok');
}

this.setState({
  color: ""
});
console.log(this.state.colors);

c.preventDefault();
}

```

onChange:

```
onChangeEdit(value) {
console.log(value);
this.setState({
  color: value
});
}

```

input field:

```
<input value={this.state.color}
            onChange={e => this.onChangeEdit(e.target.value)}
            placeholder="#000000"
            name="color" />
```

---

<div class="post-metadata">

**Author:** ![Rana\_Issa](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@Rana\_Issa](https://forum.kirupa.com/u/Rana_Issa)\
**Post date:** [February 11, 2019, 1:36pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/87 "2019-02-11T13:36:02Z")

</div>

Hello Kirupa,  
I am learning React following your book. It is really good.  
I have a question regarding the ToDoList example. You have suggested two ways of adding new items to the array (one using unshift, and the one using concat).  
When I type the code you have listed above, it works well. However, if I try to change the concat() method on the array “items” to “unshift” I start getting this error:

 ![rana_code](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/b7c0bc88123b5f636ebaa2f79845f4be23f60c08.png)

---

<div class="post-metadata">

**Author:** ![kmlpandey](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@kmlpandey](https://forum.kirupa.com/u/kmlpandey)\
**Post date:** [February 12, 2019, 12:44pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/88 "2019-02-12T12:44:39Z")

</div>

please send me edit part of this todo

---

<div class="post-metadata">

**Author:** ![kmlpandey](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@kmlpandey](https://forum.kirupa.com/u/kmlpandey)\
**Post date:** [February 13, 2019, 5:43am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/89 "2019-02-13T05:43:52Z")

</div>

Sir please send me code to edit the elements  
my emai id is [kamalpandeykp49@gmail.com](mailto:kamalpandeykp49@gmail.com)  
thank you

---

<div class="post-metadata">

**Author:** ![Parikhit\_Sarkar](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/parikhit_sarkar/32/11139_2.png) [@Parikhit\_Sarkar](https://forum.kirupa.com/u/Parikhit_Sarkar)\
**Post date:** [March 1, 2020, 6:45pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/90 "2020-03-01T18:45:14Z")

</div>

Great job on the tutorial ! Learned a lot. It’s a good starter project for react beginners like me 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 2, 2020, 5:21am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/91 "2020-03-02T05:21:33Z")

</div>

Welcome to the forums @Parikhit_Sarkar! Glad you found the tutorial helpful 🙂

---

<div class="post-metadata">

**Author:** ![Sandip\_Markad](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sandip_markad/32/11142_2.png) [@Sandip\_Markad](https://forum.kirupa.com/u/Sandip_Markad)\
**Post date:** [March 2, 2020, 11:50am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/92 "2020-03-02T11:50:10Z")

</div>

![15831448347998505142310839983450](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/6f30f79607e35c6eeddf8ed12b0e45577c3ff956.jpeg)

---

<div class="post-metadata">

**Author:** ![it18013924\_Ferreira](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/it18013924_ferreira/32/11322_2.png) [@it18013924\_Ferreira](https://forum.kirupa.com/u/it18013924_Ferreira)\
**Post date:** [March 26, 2020, 7:18pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/93 "2020-03-26T19:18:35Z")

</div>

I have a small question sir. When I use the demo I was able to see all newly added items display at the top of the todo list, So I watched your video to figure it out, how to write the coding for it. In the video, when you run the app, newly added items move to the end not the top. So can you please let mw know how to display newly added items at the top of the to do list.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [March 26, 2020, 8:08pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/94 "2020-03-26T20:08:56Z")

</div>

Just speculating, but there’s a line that looks like this in `addItem`:

```javascript
prevState.items.concat(newItem) 

```

I think you can just swap it around like so:

```javascript
[newItem].concat(prevState.items)

```

---

<div class="post-metadata">

**Author:** ![it18013924\_Ferreira](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/it18013924_ferreira/32/11322_2.png) [@it18013924\_Ferreira](https://forum.kirupa.com/u/it18013924_Ferreira)\
**Post date:** [March 28, 2020, 6:01pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/95 "2020-03-28T18:01:22Z")

</div>

It works but my todo list is not sorted. Just think like this,  
I added A, B, C to my list. In my todo list it shows like this B, A, C(Sometimes A,B,C too but the items I added before is getting changed). how ever the newly added one comes to the up of the list. can you please solve this too?

---

<div class="post-metadata">

**Author:** ![it18013924\_Ferreira](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/it18013924_ferreira/32/11322_2.png) [@it18013924\_Ferreira](https://forum.kirupa.com/u/it18013924_Ferreira)\
**Post date:** [March 28, 2020, 6:33pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/96 "2020-03-28T18:33:00Z")

</div>

now everything is working superbly Thanks a lot!!!

---

<div class="post-metadata">

**Author:** ![it18013924\_Ferreira](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/it18013924_ferreira/32/11322_2.png) [@it18013924\_Ferreira](https://forum.kirupa.com/u/it18013924_Ferreira)\
**Post date:** [March 28, 2020, 6:53pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/97 "2020-03-28T18:53:01Z")

</div>

sir,  
If I want to do something like below what should I do,  
I want to add a button for the listed items called completed items and I want to bring a listed item to the end of the list when I click that button! So what is the code for it?

---

<div class="post-metadata">

**Author:** ![firstname\_lastname](https://avatars.discourse-cdn.com/v4/letter/f/9f8e36/32.png) [@firstname\_lastname](https://forum.kirupa.com/u/firstname_lastname)\
**Post date:** [May 5, 2020, 9:55am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/98 "2020-05-05T09:55:43Z")

</div>

Hello friends,

I would really appreciate it if someone could help me find the bug here.

I’ve followed up to the end of the “adding items” section. Somehow the items array is behind by 1 item according to what is being printed.

For example if I entered “abc”, it prints an empty array. If I then enter “def”, it prints an array with just “abc”. Why is this?

Here’s my TodoList.js:

```
import React, { Component } from "react";
class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };

    this.addItem = this.addItem.bind(this);
  }

  addItem(e) {
    if (this._inputElement.value !== "") {
      var newItem = {
        text: this._inputElement.value,
        key: Date.now()
      };
   
      this.setState((prevState) => {
        return { 
          items: prevState.items.concat(newItem) 
        };
      });
     
      this._inputElement.value = "";
    }
     
    console.log(this.state.items);
       
    e.preventDefault();
  }
  
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.addItem}>
            {/* this thing here with the ref
            is so that we can access the input element via the
            reference _inputElement
             */}
            <input ref={(a) => this._inputElement = a}
                  placeholder="enter task">
            </input>
            <button type="submit">add</button>
          </form>
        </div>
      </div>
    );
  }
}
 
export default TodoList;

```

Thanks in advance.

Amazing tutorials and website by the way! Everyone is so nice on here. Wish I found this sooner 😍

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [May 5, 2020, 1:29pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/99 "2020-05-05T13:29:08Z")

</div>

When you use setState with a function, it doesn’t immediately set the state. It gets deferred for just a little bit meaning your log() call will happen before the state changes. You can read more about this here (the preview just says [reactjs.org](http://reactjs.org) but it goes to the correct part in the documentation that talks about this):

> **[React.Component – React](https://legacy.reactjs.org/docs/react-component.html)**
>
> A JavaScript library for building user interfaces

---

<div class="post-metadata">

**Author:** ![firstname\_lastname](https://avatars.discourse-cdn.com/v4/letter/f/9f8e36/32.png) [@firstname\_lastname](https://forum.kirupa.com/u/firstname_lastname)\
**Post date:** [May 5, 2020, 6:45pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/100 "2020-05-05T18:45:56Z")

</div>

Interesting - thank you!

---

<div class="post-metadata">

**Author:** ![AlexGoryushkin](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alexgoryushkin/32/10446_2.png) [@AlexGoryushkin](https://forum.kirupa.com/u/AlexGoryushkin)\
**Post date:** [July 27, 2020, 4:12pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/101 "2020-07-27T16:12:15Z")

</div>

Hello! What if we get input value throughout:

> addItem(e) {  
> e.target.elements[0].value?  
> …

Then you won’t need to use refs

---

<div class="post-metadata">

**Author:** ![talster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/talster/32/12383_2.png) [@talster](https://forum.kirupa.com/u/talster)\
**Post date:** [September 5, 2020, 12:55pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/102 "2020-09-05T12:55:34Z")

</div>

Hi there Kirupa,

In the tutorial, you wrote “we are going to tie together a [lot of the concepts and techniques you’ve learned](https://www.kirupa.com/react/index.htm)”. Can you specify which tutorials you strongly recommend a newbie to React go through before attempting the simple to-do list app?

Thank you kindly,

Avi

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 5, 2020, 4:26pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/103 "2020-09-05T16:26:35Z")

</div>

If this is your first jump into React, I would encourage starting at the top itself and going down: [https://www.kirupa.com/react/index.htm](https://www.kirupa.com/react/index.htm) The concepts build on top of each other.

If you are already familiar with React, it would be a fairly quick review. You can go through the TodoList tutorial and see what you need more details on and focus on those.

Cheers,  
Kirupa 😄

[Previous page](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214.md?page=4)

[Next page](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214.md?page=6)