Dropdown not updating after changing the value from the code

[Daniela]

Hello,

 

I have a simple dropdown and I update the value of the id in the code but the value is not reflected, the code is below, some help would be appreciated. (The dropdown I am trying ot update is regulation)

 

              <DropDownList 

                  disabled={modelDropDownDisable}           

                  data={compModelData}                   

                  onChange={(e) => {    

                      setCompModelText(e.target.value);

                      const compressorModelSelected = compressorsModelData.filter(function(elem) {

                        //return false for the element that matches both the name and the id

                        return (elem.fk_brand_id == compBrandId.id && elem.comp_model == e.target.value)

                      }); 

                      if(compressorModelSelected.length>0) {

                        debugger

                        setCompressorModelSelectedRegulation(compressorModelSelected[0].fk_comp_regulation_id);

                      }

                    }

                  }

                  value={compModelText}

                

/>

          <DropDownList

                      value={compressorModelSelectedRegulation}

                      textField="text"

                      dataItemKey="id" 

                      onChange={(e) => {

                        setCompressorModelSelectedRegulation(e.target.value);

                      }}

                      data={compRegulations}

                    /> 

 

[Filip]

Hello, Daniela,

In order to update the dropdown, it is important to pass the entire object in the value prop with the correct ID, and not just the id of the item. In order to do that it is necessary to find the entire object by looping through the data and finding the object only through its ID. Setting the entire object in your setCompressorModelSelectedRegulation function should successfully update the data, similar to this example:

https://stackblitz.com/edit/react-iqbwri?file=app/main.jsx

I hope this helps.

Regards,Filip Progress Telerik

[Daniela]

ok, thanks