CODEWITHSUNDEEP
javascriptreactjs
Azeem Ansari
Azeem Ansari

Reputation: 47

How to pass an input value to another input value onBlur event in ReactJs?

I want to pass an input(first input) value to another(second input) input onBlur(first input) event, but we should be able to change that second value onChange event if we want, but currently I am not able to change second input value since we already passed input1 value to it.

<input type="text" value={val1} onChange={(e) => setVal1(e.target.value)} onBlur={() => setVal2(val1)}/>
<input type="text" onChange={() =>} value={val2}/>

Upvotes: 0

Views: 1313

Answers (2)

samo0ha
samo0ha

Reputation: 3788

this a controlled component, you can't change its value out of the element's scope, so you need to convert the input element to an uncontrolled component. replace the value property with defaultValue.

<input
   type="text"
   value={val1}
   onChange={(e) => setVal1(e.target.value)}
   onBlur={() => setVal2(val1)}
  />

 <input
   type="text"
   onChange={(e) => setVal2(e.target.value)}
   defaultValue={val2}
  />

working demo

Upvotes: 1

Vaaneet Kapoor
Vaaneet Kapoor

Reputation: 266

Even if you pass val1 to the second input, on onChange event, you can still edit the value the input. Please continue with the onchange event in second input

Upvotes: 0

Related Questions