score:0

Accepted answer

remove the logic inside componentwillupdate and move it to handleitemchanged. like so:

export default class additem extends react.component {

  useritems;

  constructor(props) {
    super(props);

    this.state = {
      content: "",
      items: [],
    };
  }

  updatemessage(event) {
    this.setstate({
      message: event.target.value,
    });
  }

  handleclick() {
    var items = this.state.items;

    items.push(this.state.message);

    this.setstate({
      items: items,
      content: "",
    });
  }

  handleitemchanged(i, event) {
    var items = this.state.items;
    items[i] = event.target.value;

    this.setstate({
      items: items,
    });
     localstorage.setitem('items', json.stringify({items, message :""}));


  }



  componentdidmount() {
    this.useritems = json.parse(localstorage.getitem('items'));

    if (localstorage.getitem('items')){
      this.setstate({
        items: this.useritems.items,
        message: this.useritems.message
      })
    }else {
      this.setstate({
        items: [],
        message: ""
      })
    }
  }

  renderrows() {
    var context = this;

    return this.state.items.map(function (o, i) {
      return (
        <tr key={"item-" + i}>
           <td classname="2">
                  <div>
                  <input
                  type="text"
                  value={o}
                  onchange={context.handleitemchanged.bind(context, i)}
         </tr>

Related Query

More Query from same tag