CODEWITHSUNDEEP
javascriptreactjsuser-interfacereact-reduxreact-hooks
Shruti sharma
Shruti sharma

Reputation: 211

Need to populate data of other filed based on the dropdown selection react formik

I have below form in react.

enter image description here

my requirement is once user select the sponsor address,address2,zipCode should be populated.

enter image description here

I have populated list for sponsor using below method.

 useEffect(()=>{
        fetchStatus();
    },[]);
    
    
    const fetchStatus = async ()=>{
       const {data}= await httpClient.get( config.resourceServerUrl+"/sponsors");
           setResult(data);
    }

this is my select code.

                                      <div>
                                        <select
                                            id="sponsor" 
                                            name="sponsor"
                                            className="form-control"
                                            placeholder="Sponsor"
                                            onChange={(e)=>populateData(e)}
                                        >
                                            <option value="">Please select the 
                                             sponsor</option>
                                          {
                                              result.map((res:any)=>
                                                  <option >{res.name}</option>
                                              )

                                          }
                                           </select> 
                                    </div>

I am calling below method on the onChange event.

const populateData=()=>{
    
}

can you help me the with logic for the code to populate the list. even small suggestion will be really helpful.

Upvotes: 0

Views: 341

Answers (1)

kodamace
kodamace

Reputation: 485

When the populateData func is envoked try something like

firstly have some local state or redux state

const [data, setData] = useState({
address: '',
address2: '',
zipCode: '',
})

const populateData = () => {
 const dataToAdd = getsomeData(() => ({
address: 'Some address',
address2: 'something else',
zipCode: 'ZIP_CODE',
}))
 
setData(dataToAdd)

}

then have the values passed to the inputs and either have them as controlled inputs or you will have to update the formData in a similar way

Upvotes: 1

Related Questions