pankod / react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.
204 stars 56 forks source link

Selected value is not updating with two or more PickerModal #52

Open higorcoliveira opened 4 years ago

higorcoliveira commented 4 years ago

I believe I have a problem when I use two or more PickerModal components. I have a Picker wich items depends on selecting values from another Picker.

I wrapped PickerModal inside a custom component called InputPicker:

<InputPicker
       selectedValue={client}
       data={clients}
       type={projectTypes.CLIENT}
       onChangePicker={pickerInputHandler}
  />

  <InputPicker
    selectedValue={project}
    data={projects}
    type={projectTypes.PROJECT}
    onChangePicker={pickerInputHandler}
  />

Every time I select a CLIENT, the items (represented for data props) inside the component should update based on my CLIENT choice. This works well, however the selected value remains with the old one.

Here is my code inside InputPicker custom component:

// more code
const { selectedValue, data, type, onChangePicker } = props;

<PickerModal
          renderSelectView={(disabled, selected, showModal) => (
            <TouchableOpacity onPress={showModal}>
              {Object.keys(selected).length !== 0 ? (
                <Text>{selected.Name}</Text>
              ) : (
                <Text>{"..."}</Text>
              )}
            </TouchableOpacity>
          )}
          items={data}
          onSelected={selected => {
            onChangePicker(selected.Id, type);
          }}
          selected={selectedValue}
          sortingLanguage={"pt"}
          showToTopButton={true}
          searchPlaceholderText={"Buscar..."}
          requireSelection={true}
 />

The prop selectedValue is always passed with the correct value. To "flush" the value of second Picker I added a dummy item inside my items with Id equals 0. Next I called the function pickerInputHandler when onSelected is called, as show:

const pickerInputHandler = (value, type) => {
    switch (type) {
      case projectTypes.CLIENT:
        setClient(value);
        setProject(0);
       // more code

Why the selected value is not updating in the second PickerModal when I change the outer state and pass the value as props?