How to Change pre filled input values

Solution 1:

This happens because in your onChange method, you are changing InputFields variable, where as your getLinks method changes links variable, which is being rendered on the screen.

If you want to set an initial value, and then allow the user to change it, change your input to :

<input className="form-control" defaultValue={link.name} 
 value={InputFields.name} type="text" name="name" placeholder="name" onChange={changeHandler} />

Likewise change for your other input, if you do not want the user to change the value later on, it's often better to add disable in the input to avoid confusing people. 🙂

I know that this has been done so that you can create a minimal reproducible example for us, but I would have directly called setInputFields in the axios.get section to avoid this problem in the first place, however, if not possible, use the defaultValue and value as I've shown above.