Building a Simple Todo List App in React

#77

Do you have a demo page for the Todo List?

I can’t get mine to work. I get “items not defined”.

thank you

#78

Here you go: https://www.kirupa.com/react/examples/todo.htm :slight_smile:

1 Like
#79

Thanks a lot :slight_smile:

#80

I’m still confused about the use of the “ref” property and the purpose of the callback.

ref={(a) => this._inputElement = a}

I understand that it equals the code below.

(function (a) {
return this._inputElement = a;
});

But, what’s the purpose of returning this.inputElement. What does “this” refer to and what is “a”?

#81

Hi Kirupa,

I have another question for you :grinning:
This evening I completed the Todo List, and I think I understand most of it.
I’m trying build upon it, and make a wish list app.

It looks like this, for right now.

07 PM
Screen Shot 2017-11-08 at 10.06.07 PM.png817×148 3.55 KB

The only thing is I’m having a hard time figuring out how to get these in the list to display. I thought I could:

<input ref={(a) => this._inputElement = a}
   placeholder="item">
</input>
<input ref={(b) => this._inputElement = b}
   placeholder="description">
</input>
<input ref={(c) => this._inputElement = c}
    placeholder="link">
</input>

But nothing is happening.

I know you’re probably busy, but if you have a chance, could help point me where in the code I could get this to work?

#82

@Elizabeth_Amanda,

Generally you want to avoid using ref if you can. The problem with your example is that you have 3 inputs and each one has a ref which assigns itself to the same instance property, _inputElement. So instead of having references to 3 different inputs, you have one reference that gets assigned a different input reference 3 different times - whose value will be the last input reference assigned to it. In fact it looks like you tried to fix this by changing the reference variable, but that’s not the one that makes a difference (a, b, and c). That can be the same for each, its the _inputElement that you’d want to be different.

But again, using ref isn’t preferred and can be avoided. So instead, set input values to state properties and detect changes with onChange. You just need to make sure you have properties for each of your inputs. Here’s an example: https://jsfiddle.net/v4qvt8bk/

#83

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

#85

That’s a good question :stuck_out_tongue:

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

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

:grinning:

#86

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" />
#87

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
rana_code.png1007×625 39.9 KB

#88

please send me edit part of this todo

#89

Sir please send me code to edit the elements
my emai id is [email protected]
thank you

#90

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

1 Like
#91

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

#92

15831448347998505142310839983450
158314483479985051423108399834502000×1500 1.24 MB

#93

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.

#94

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

prevState.items.concat(newItem)

I think you can just swap it around like so:

[newItem].concat(prevState.items)
#95

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?

#96

now everything is working superbly Thanks a lot!!!

#97

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?