Change input given value to a custom value in ReactJS

Question

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

}

I'm a little confused how its not giving an error? handleInputChange changes this.state.coordinatesList to be a string but you're mapping over it as if it were an array. — Brian Thompson
– Brian Thompson, Commented Sep 16, 2020 at 15:29
value={"x: " + item[0]} this is also probably not going to do what you expect. You should make a label for the input instead. — Brian Thompson
– Brian Thompson, Commented Sep 16, 2020 at 15:31
What populates coordinatesList? You're going to need to provide more context, after the update I still dont see how this could work, and you're still changing the data type of coordinatesList in the change handler. — Brian Thompson
– Brian Thompson, Commented Sep 16, 2020 at 15:50

Shubham · Accepted Answer · 2020-09-16 16:40:18Z

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

edited Sep 16, 2020 at 16:40

answered Sep 16, 2020 at 15:32

Shubham

73812 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Brian Thompson Over a year ago

You should include an explanation of what your code does differently. Generally a code only answer is not considered a good one.

Brian Thompson Over a year ago

In addition, the answer mutates state: let updatedState = this.state.coordinatesList;.

Dave Newton Over a year ago

@Shubham The point is that state should never be mutated directly; it can lead to difficult-to-trace behavior problems.

Shubham Over a year ago

here state are not mutating directly. I've took a variable and assigned the state to it and if you see the next statement I'm updating the state with updatedState variable.

Brian Thompson Over a year ago

@Shubham That's a common mistake, but because of how JavaScript arrays work, that is still mutating the original. You need to create a completely new array instead of assigning the reference: let updatedState = [...this.state.coordinatesList];

|

Dharman · Accepted Answer · 2020-09-16 15:39:54Z

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.

edited Sep 16, 2020 at 15:39

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 16, 2020 at 15:34

nabil arta

1741 silver badge4 bronze badges

Collectives™ on Stack Overflow

Change input given value to a custom value in ReactJS

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related