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

Question

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

Answer 1

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

Answer 2

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