How to handle “onDropdownClose” ?

[CharlotteRdn]

Hello, I'm a little lost with onDropDownClose The purpose of this screen is to allow me to choose a product in an autocomplete input, when I have chosen it, I authorize the user to access the camera in order to scan the product in question. I have an autocomplete input in which I chose the name of the product (here in the example it will be the name of a flight, but it's for testing, whatever).

I have the error

"onDropdownClose is not a function. (In 'onDropdownClose ()','onDropdownClose' is undefined)"

and I don't know how to handle it.

If the product is selected, I want that when the dropdown is closed, this.state.eventSelected becomes true but how to manage this with onDropDownClose?

I'm a little lost in my code and I'm going to need some explanation. Thank you if you have time for me to help me. In any case, thank you for reading me.

    class Tickets extends Component {
      constructor(props) {
        super(props);
        this.state = {
          Press: false,
          hasCameraPermission: null,
          reference: '',
          name:'',
          lastScannedUrl:null,
          eventSelected: false, 
          displayArray: []      
        };
      }

       initListData = async () => {
        let list = await getProducts(1);

        if (list) {
          this.setState({
            displayArray: list,
            reference: list.reference,
            name: list.name
          });      
        }
       // console.log('name dans initListData =', list.name)
       // console.log('reference dans initListData =', list.reference)
      };

       async UNSAFE_componentWillMount() {
        this.initListData();
      };

      componentDidMount() {
        this.getPermissionsAsync();    
      }

      getPermissionsAsync = async () => {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === "granted" });
      };

      handleBarCodeScanned = ({ type, data }) => {
        this.setState({ Press: false, scanned: true, name: data });
        this.props.navigation.navigate('ProductDetails', {name : parseInt(this.state.state.name)})
      };

      renderBarcodeReader = () => {
        const { hasCameraPermission, scanned } = this.state;

        if (hasCameraPermission === null) {
          return <Text>{i18n.t("scan.request")}</Text>;
        }
        if (hasCameraPermission === false) {
          return <Text>{i18n.t("scan.noaccess")}</Text>;
        }
        return (
          <View
            style={{
              flex: 1,
              ...StyleSheet.absoluteFillObject
            }}
          >   
          <Camera
            onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
            barCodeScannerSettings={[Camera.Constants.Type.qr]}
            style={{flex:1}}
          />
            {scanned && (
              <Button
                title={"Tap to Scan Again"}
                onPress={() => this.setState({ scanned: false })}
                disabled={this.state.selectedItem===null}
              />
            )}    
          </View>
        );
      }
      handleSelectItem(item, index) {
        const {onDropdownClose} = this.props;
        onDropdownClose();

        this.setState({eventSelected: true})
        //console.log(item);
      }
      render() {
        const { hasCameraPermission, scanned, Press } = this.state;
        let marker = null;

        const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;

    // console.log('displayArray', this.state.displayArray,)
    // console.log('this.state retourne', this.state)
        return (
          <View style={{flex:1}}>         
            <View style={{width: "100%", zIndex: 100}}>                         
              <Autocomplete
                key={shortid.generate()}
                containerStyle={{margin: 0, padding: 0, borderBottomColor: 'transparent',}}
                inputStyle={{ width: '80%', borderWidth: 1, backgroundColor: '#FFF', opacity: 0.9, borderColor: '#F78400'}}
                placeholder={i18n.t("tickets.event")}
                placeholderColor="#F78400"
                pickerStyle={styles.autocompletePicker}
                scrollStyle={styles.autocompleteScroll}
                scrollToInput={ev => {}}
                handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
                onDropdownClose={() => onDropdownClose()}
                onDropdownShow={() => onDropdownShow()}              
                data={this.state.displayArray}
                minimumCharactersCount={2}
                highlightText
                valueExtractor={item => item.name}
                rightContent
                rightTextExtractor={item => item.properties}
              />          
            </View>
            {this.state.eventSelected ? (
              <View>
              {this.renderBarcodeReader()}
              </View>
              ) : (
              <Text style={{ top: '33%', zIndex:100, color: 'red', fontStyle: 'italic', fontSize: 18}}>{i18n.t("tickets.warning")}</Text>
                )}
          </View>
        );
      }
    }
    export default Tickets;