score:0

i think there's a simple way to do that now. you can use this code to update input.

class input extends component {
  state = {
    yourinput: '',
  };

  handleinput = (e) => {
    this.setstate({yourinput: e.target.value});
  };

  render() {
    return (
      <div>
        <h2>{this.state.yourinput}</h2>
        <input onchange={this.handleinput} value={this.state.yourinput} />
      </div>
    );
  }
}

try to modify your code based on this for the simplicity.

score:1

here is yours solution

<sortablecontainer coordinateslist={this.state.coordinateslist} drag={this.handledragging}>
      {this.state.coordinateslist.map((item, index) => (
        <sortableitem
          key={item}
          index={index}
          classname="sortable-item"
        >
          <sorticon />
          <input onchange={(e) => this.handleinputchange(e, index)} type="text" value={`x: ${item[0]}`} />
        </sortableitem>
      ))}
    </sortablecontainer>

   handleinputchange(e, index){
     let updatedstate = [...this.state.coordinateslist];
     updatedstate[index] = number(e.target.value)
     this.setstate({
       coordinateslist: updatedstate
     })
   }

Related Query

More Query from same tag