Building a Simple Todo List App in React


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