Ion-picker in React: modify options with ionPickerColChange

Hi,
I’m trying to use the ion-picker component with multiple columns in a React Ionic app.

I need to set the possible values in one column based on the selected values in the other columns analogous to what the ion-datetime component is doing (where the values for day depend on the selected month and year).

I can catch the change with

document.addEventListener('ionPickerColChange', (event) => {
    ...
    this.setState({ columns: ... })
}

The problem is that the picker (which receives the columns as <IonPicker … columns={this.state.columns} /> doesn’t seem to get refreshed when the state changes. Items that should be disabled are still there and only disappear when I close and reopen the picker.

Any idea how I can solve this? Or alternatively, does someone know an npm package that I can use instead which contains components for a datepicker and a custom picker which supports this functionality?

Thanks!

1 post - 1 participant

Read full topic