I am currently trying to learn react native and wanted to implement a dropdown menu.

I tried going by the class based example, but im getting the following error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.setState')]
at node_modules\react-native-dropdown-picker\src\components\Picker.js:369:10 in Picker
at node_modules\react-native-dropdown-picker\src\components\Picker.js:636:34 in __onPress
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:31 in <anonymous>
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:124:27 in invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:130:16 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

And this is my code

import React from "react";
import DropDownPicker from 'react-native-dropdown-picker';

export class GroupSelector extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      open : false,
      value : 'One',
      items: [ 'One', 'Two', 'Three']
    };

    this.setValue = this.setValue.bind(this);
  }

  setOpen(isOpen) {
    console.log("Open: "   isOpen);
    this.setState({
      open : isOpen
    });
  }

  setValue(callback) {
    this.setState(state => ({
      value: callback(state.value)
    }));
  }

  setItems(callback) {
    this.setState(state => ({
      items: callback(state.items)
    }));
  }


  render() {
    const { open, value, items } = this.state;

    return (
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={this.setOpen}
        setValue={this.setValue}
        setItems={this.setItems}
      />
    )
  }
};

The exception is thrown when trying to open the dropdown. The logging in setOpen returns Open: true

I come from C#/C and I dont have a lot of experience working with javascript, so maybe I am just not understanding some concept.

Thank you for any help with this!

CodePudding user response：

Class component example in the documentation is broken, but functional component one seems to work fine. Functional components are the prefered syntax anyway, so probably a good idea to stick with that.

Here's a working example, though:

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,
            value: null,
            items: [{ label: 'A', value: 'a'}, { label: 'B', value: 'b'}, { label: 'C', value: 'c'}]
        }
    }

    setValue = (callback) => {
        this.setState({ value: callback() })
    }

    setOpen = (open) => this.setState({ open })

    setItems = (items) => this.setState({ items })

    render() {
        const { open, value, items } = this.state
  
        return (
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <DropDownPicker
                    open={open}
                    value={value}
                    items={items}
                    setOpen={this.setOpen}
                    setValue={this.setValue}
                    setItems={this.setItems}
                />
            </View>
        )
    }
}