Set value from one input field to another input field; the 2nd input field should be editable-CodePudding

I have two input fields From Id and To id. When I enter value in form Id in UI it should be automatically copied to To Id. Also user should be able to change To Id field if required.

Code:

<Formfield label=“From Id”>
   <Input value={frmdata.fromid} onchange={(evt) = setFrmdata( {… 
    frmdata, fromid: evt.target.value} ) }
/>
<Formfield label=“To Id”>
   <Input value={frmdata.toid} onchange={(evt) = setFrmdata( {… 
   frmdata, toid: evt.target.value} ) }
/>

CodePudding user response：

Maybe just doing this in the first field?

<Formfield label=“From Id”>
  <Input value={frmdata.fromid} onchange={(evt) = setFrmdata( {… 
   frmdata, fromid: evt.target.value, toid: evt.target.value} ) }
  />

CodePudding user response：

This will use From Id value as defaultValue when frmdata.toid is undefined, or you can define the defaultValue prop

<Formfield label=“From Id”>
   <Input value={frmdata.fromid} onchange={(evt) = setFrmdata( {… 
    frmdata, fromid: evt.target.value} ) }
/>
<Formfield label=“To Id”>
   <Input value={frmdata.toid || frmdata.fromid} onchange={(evt) = setFrmdata( {… 
   frmdata, toid:  evt.target.value} ) }
/>