Value is not updating on the input entry in JS in React app

Question

Trying to put a new value in a form by implementing this script.

document.querySelector('src').value = 'val';

It changes the text in text field but when I click enter after, this script returned the previous value. It does not change a new value. When I do the same manually the value is changing.

Is this react? You might want to set the value on the form element to state and update the state instead — Chuksy, Aug 05 '19 at 05:46
refer to this question. from React >=15.6 because the setter .value= is not working as we wanted as React library overrides the input value setter https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js — Durgesh Satyam, Jun 21 '23 at 11:30

ravibagul91 · Answer 1 · 2019-08-05T05:37:05.783

1

document.querySelector take string as argument.

You should do this,

document.querySelector('src').value = 'val';   //for src tag, I don't think of any `src` tag in HTML
document.querySelector('#src').value = 'val';  //for src as id
document.querySelector('.src').value = 'val';  //for src as class

edited Aug 05 '19 at 05:37

answered Aug 05 '19 at 05:31

ravibagul91

20,072
5
36
59

yes, I put string there. It inputs my value in a textfield, but value doesn't change. I can see it in console. – JohnPix Aug 05 '19 at 05:42
So you have element with `src` tag? Where you want to add value? – ravibagul91 Aug 05 '19 at 05:43
Post your element where you want to add value. – ravibagul91 Aug 05 '19 at 05:44
my value is 'test' , I am trying to change it by implementing the script above. It changes the text in a textfield but it doesn't change the value itsels. But when I change it manually it changes the value. – JohnPix Aug 05 '19 at 05:54
Do this - document.querySelector('.testClass').value = 'val'; – ravibagul91 Aug 05 '19 at 05:56
the problem is not in this value, it finds it and puts text there but it doesn't change the value when I click enter. – JohnPix Aug 05 '19 at 05:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197472/discussion-between-ravibagul91-and-nikolai). – ravibagul91 Aug 05 '19 at 05:58
I have also experienced this problem. same issue no matter if you go back to the parent and then to the child to re-register as a class. It will always revert and just add text. – user2455808 May 24 '23 at 18:56

score 0 · Answer 2 · answered Aug 05 '19 at 05:52

0

You should do this via the state. React re-renders the components on change of state which is why you wanna change state and in turn cause the input entry to change.

answered Aug 05 '19 at 05:52

Gayal Rupasinghe

114
8

How to do it via the state? – JohnPix Aug 05 '19 at 05:58

Value is not updating on the input entry in JS in React app

2 Answers2