react-native-dropdown-picker: TypeError: undefined is not an object (evalating 'this.setState')

Question

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!

Answer 1

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>
        )
    }
}