Dropdown list value send on form submit

Question

Hello im trying to send the value from the dropdownlist on form submit, but the value is always null, im working with hooks. Here's the piece of code im using.

const [residentes = [], setResidentes] = useState(null);

const idResidente = useFormInput('');

const useFormInput = initialValue => {
    const [value, setValue] = useState(initialValue);
    const handleChange = e => {
        setValue(e.target.value);
    }
    return {
        value,
        onChange: handleChange
    }
}

const getResidentesService = () => {
        setSaved(false);
        // llamado a la api
        apiClient.getService("Residentes").then(response => {
            setResidentes(response);
            setShow(false);
        }).catch(error => {
            if (error === 401 || error === 404) {
                setMensaje('Ocurrio un error al intentar cargar los datos');
            }
        });
    };

and in the HTML form im trying to do this:

<DropDownListComponent name="idResidente"
 dataSource={residentes} 
 fields={residentesFields} 
 placeholder="Residentes"
 {...idResidente} />

But when i send the form the value is always null.

Sureshkumar P · Answer

Hi Raul, 
 
Greetings from Syncfusion support. 
 
Based on your shared information and code example, we suspect that you have getting empty dropdownlist after form submit even if you choose the values. You have not bound the component change event with handlechange. That is the reason you have get the null value after every form submit. We suggest you bind the change event to hook the handle change to resolve the issue.  
 
Kindly refer the below code example:  




  <DropDownListComponent 
        id="games" 
        dataSource={sportsData} 
        value={value} 
        change={e => handleChange(e)} 
        placeholder="Select a game" 
        popupHeight="220px" 
      /> 
 
 
We have created the sample based on your requirement. please find the sample here: https://codesandbox.io/s/forms-with-react-hooks-wcsyz  
 
If still you have facing the issue, If possible, please reproduce the issue with above attached sample and explain the detailed issue replication steps these details help us to resolve the issue at earliest. 
 
Regards, 
Sureshkumar P

Raul Alejandro Baez Camarillo · Answer

Thanks a lot for the response, you really solve my problem, i create the handleChange for the dropdownlist and it worked.

Sureshkumar P · Answer

Hi Raul, 
 
Thanks for your update. Please get back to us if you need further assistance on this 
 
Regards, 
Sureshkumar P