I have one form in formik in react. it has 2 field one dropdown list and one input field. dropdown is getting populated from API. my requirement is when user selects any value in dropdown corresponding to that value address field gets populated.
I am populating list based on API call.
useEffect(()=>{
fetchStatus();
},[]);
const fetchStatus = async ()=>{
const {data}= await httpClient.get( config.resourceServerUrl+"/sponsors");
if(data.length>0){
setResult(data);
setActive(true);
}
}
below code is select.
<div>
<Field
as="select"
id="sponsor"
name="sponsor"
className="form-control"
placeholder="Sponsor"
onChange={ (e:any)=>{
setFieldValue("address","Dummy Address");
}
} >
<option value="">Please select the
sponsor</option>
{
active && result.map((res:any)=>
<option >{res.name}</option>
)
}
</Field>
</div>
when I am putting below in my select field to set address its working but its static. I want my data to get populated from API based on the value selected in list.
onChange={ (e:any)=>{
setFieldValue("address","Dummy Address");
}
instead of this "Dummy Address" how can I put API data?
below is my address field.
<td>
<Field
id="address"
name="address"
type="text"
className="form-control "
placeholder="Address"
/>
</div>
</td>
<td>
<span className={styles.mandatory}>
<ErrorMessage name="address" />
</span>
</td>

