Building a Simple Todo List App in React


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


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:

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



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,

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

  color: ""



onChangeEdit(value) {
  color: value

input field:

<input value={this.state.color}
            onChange={e => this.onChangeEdit(}
            name="color" />


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:


please send me edit part of this todo


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