Screen freezes when filtering values from multiple pickers

[maxsebes]

Hi,

I'm making a form with multiple pickers where values can only be selected at one picker. For now I am able to filter the values, but when the last value is selected the picker freezes and nothing is working anymore.

Is this a bug or am I doing something wrong in filtering my values? It is working on Web, but not on a device.

The code and working Snack: https://snack.expo.dev/xEBXDjPrL

import React, { useState, useCallback, Component } from "react";
import {
  View
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";

class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {

      items :[
        [{label: 'Test', value: 1},{label: 'Test2', value: 2},{label: 'Test3', value: 3},],
        [{label: 'Test', value: 1},{label: 'Test2', value: 2},{label: 'Test3', value: 3},],
        [{label: 'Test', value: 1},{label: 'Test2', value: 2},{label: 'Test3', value: 3},]
      ],

      firstOpen: false,
      firstValue: '',
      secondOpen: false,
      secondValue: '',
      thirdOpen: false,
      thirdValue: '',
    }
  }

  changeItems(value, index) {

    var array = [...this.state.items]; // make a separate copy of the items
    var newarray = []; // create empty array

    // Loop over array items
    array.map((items,i) => {

      if(value !== '' && i !== index) {
        const arr = items.filter((item) => item.value !== value);
        newarray.push(arr);
      }
      else {
        newarray.push(items);
      }

    })
    this.setState({items: newarray});

  }

  render() {
    return(<View style={{marginTop: 100}}>
      <DropDownPicker
              open={this.state.firstOpen}
              value={this.state.firstValue} 
              items={this.state.items[0]}
              setOpen={(callback) => this.setState({firstOpen: callback})}
              setValue={(callback) => this.setState({firstValue: callback(this.state.firstValue)})}
              setItems={(callback) => this.setState({items: this.state.items})}
              placeholder="Select"
              onChangeValue={(value) => {
                this.changeItems(value,0)
              }}
              zIndex={3000}
              zIndexInverse={1000}
              listMode="MODAL"
            />
            <DropDownPicker
              open={this.state.secondOpen}
              value={this.state.secondValue} 
              items={this.state.items[1]}
              setOpen={(callback) => this.setState({secondOpen: callback})}
              setValue={(callback) => this.setState({secondValue: callback(this.state.secondValue)})}
              setItems={(callback) => this.setState({items: this.state.items})}
              placeholder="Select"
              onChangeValue={(value) => {
                this.changeItems(value,1) 
              }}
              zIndex={2000}
              zIndexInverse={2000}
              listMode="MODAL"
            />
            <DropDownPicker
              open={this.state.thirdOpen}
              value={this.state.thirdValue} 
              items={this.state.items[2]}
              setOpen={(callback) => this.setState({thirdOpen: callback})}
              setValue={(callback) => this.setState({thirdValue: callback(this.state.derdeValue)})}
              setItems={(callback) => this.setState({items: this.state.items})}
              placeholder="Select"
              onChangeValue={(value) => {
                this.changeItems(value,2) 
              }}
              zIndex={1000}
              zIndexInverse={3000}
              listMode="MODAL"
            />
            <View>
          </View>
    </View>)
  }
}
export default Home;

[maxsebes]

Fixed:

the changeItems function needed to be called by setValue, not by onChangeValue