TypeError: Cannot convert undefined or null to object (referring to Object.keys)

Question

So, the premise of the code is to create a dynamic drop down box, based on countries, cities, towns etc. A selected country selection, will populate a secondary drop-down box of associated cities in that selected country, for example.

But I'm receiving the above mentioned error messages. What's the best way to resolve this?

import { fields } from '../../common/lib/redux-fields';

class FieldsPage extends React.Component {

  constructor(props) {
    super(props)

    this.handleFirstLevelChange = this.handleFirstLevelChange.bind(this)
    this.handleSecondLevelChange = this.handleSecondLevelChange.bind(this)

    // Prepopulate with the first item for each level
    this.state = {
      firstLevel: Object.keys(props.options)[0],
      secondLevel: Object.keys(props.options)[0][0]
    }
  }

  handleFirstLevelChange(event) {
    this.setState({firstLevel: event.target.value});
  }

  handleSecondLevelChange(event) {
    this.setState({secondLevel: event.target.value});
  }

  onFormSubmit = () => {
    const { dynamicFields, fields } = this.props;

    const values = {
       ...fields.$values(),
      concepts: {
        ...dynamicFields,
      },
    };
  } 

  render() {

    // Dynamic drop-down box 
    const renderOption = item => <option value={item}>{item}</option>
    const firstLevelOptions = Object.keys(this.props.options).map(renderOption)
    const secondLevelOptions = this.props.options[this.state.firstLevel].map(renderOption)

    return (
      <View>
        <Form onSubmit={this.onFormSubmit}>
          <Block>
            <Select
              {...fields.donation}
              disabled={disabled}
              label="Donation"
              options={[
                { children: 'Two', value: 2 },
                { children: 'Four', value: 4 },
                { children: 'Eight', value: 8 },
                { children: 'Sixteen', value: 16 },
                { children: 'Thirty-Two', value: 32 },
                { children: 'Sixty-Four', value: 64 },
              ]}
            />
          </Block>
          <Block>
            <Select
              onChange={this.handleFirstLevelChange}
              {...fields.handleFirstLevelChange}
              disabled={disabled}
              label="handleFirstLevelChange"
              value={this.state.firstLevel}
            />
          </Block>
          <Block>
            <Select
              onChange={this.handleSecondLevelChange}
              {...fields.handleSecondLevelChange}
              disabled={disabled}
              label="handleSecondLevelChange"
              value={this.state.secondLevel}
            />
          </Block>
          <Button disabled={disabled} type="submit">
            <FormattedMessage {...buttonsMessages.submit} />
          </Button>
        </Form>
      </View>
    );
  }

}

const options = {
  "USA": ["New York", "San Francisco"],
  "Germany": ["Berlin", "Munich"]
}

Answer 1

this.handleFirstLevelChange = this.handleFirstLevelChange.bind(this)
this.handleSecondLevelChange = this.handleSecondLevelChange.bind(this)

on the above two lines you're calling the same key under this object which is being defined. so this.handleFirstLevelChange points to undefined . bind method is available on prototype of functions . so you're getting this error unable to read property bind of undefined(this.handleFirstLevelChange)