DropDownPicker worked after clicking second time only

Question

I have two dropdown picker. One is dependent on another one. If I click color on one dropdown another dropdown should show list of colors but its not working properly. If I click on first dropdown first time and select color second dropdown shows nothing but when I click on color again it shows the result in second dropdown. Not sure why its happening Here is my slack link: https://snack.expo.dev/@anamika1593/carlist

Answer 1

I fixed your code. Your problem was that you set the state in function and then you used the variable from the state "selected" but when you set the state. The Variable doesn't change immediately and you used "old value" from the state.

    if (item.label === "Color") {
        const colorData = [...new Set(data.map((val) => val.car_color))];
        var color = colorData.map(function (val, index) {
          return {
            id: index,
            value: val,
            label: val,
          };
        });
        return setChildValue(color)
      } else if (item.label === "Model") {
        const modelData = [...new Set(data.map((val) => val.car_model))];
        var model = modelData.map(function (val, index) {
          return {
            id: index,
            value: val,
            label: val,
          };
        });
        return setChildValue(model)
      }  else if (item.label === "Year") {
        const yearData = [...new Set(data.map((val) => val.car_model_year))];
        var year = yearData.map(function (val, index) {
          return {
            id: index,
            value: val,
            label: val,
          };
        });
        return setChildValue(year)
        

  }

You have to do it like this and use item that you put in the function. Fixed code