CODEWITHSUNDEEP
javascripthtmlreactjs
Omar
Omar

Reputation: 242

Change input given value to a custom value in ReactJS

I am very new to ReactJS, I'm trying to type inside the input field however, it is overriding only 1 number then the cursor disappears, I want the curosor ro stay so I can type as much numbers as I want. I've watched several tutorials however non of them worked in my case. Appreciate your assistance regarding this matter

this.handleInputChange = this.handleInputChange.bind(this)

this.state = {
  coordinatesList: [
     [29.294957293, 30.1027401502],
     [30.193056150, 26.1047492638]
]
}

//coordinatesList returns a an array list of arrays with 2 index
// I want to display each index seperatly, that's why I used item[0]

<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={item[0]} />
        </SortableItem>
      ))}
    </SortableContainer>


handleInputChange(e, index){
 let updatedState = [...this.state.coordinatesList];
 updatedState[index] = [Number(e.target.value), 
 this.state.coordinatesList[index][1]]
 
 this.vectorLayer.clear();
 apiRegistry
  .getApis(["Feature"])
  .then(([Feature]) => {
    var feature = new Feature({
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [this.state.coordinatesList]
      },
      "properties": {
      }
    })
    this.vectorLayer.addFeature(feature);
    this.setState({
      coordinatesList: updatedState
    })
  });

}

Upvotes: 1

Views: 88

Answers (2)

Shubham
Shubham

Reputation: 738

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
     })
   }

Upvotes: 1

nabil arta
nabil arta

Reputation: 174

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.

Upvotes: 0

Related Questions