Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
higorcoliveira opened this issue Feb 19, 2020 · 0 comments
Open

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

higorcoliveira opened this issue Feb 19, 2020 · 0 comments

Comments

@higorcoliveira
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant