How to set multiple select with @shoutem/ui DropDownMenu?

I use DropDownMenu and take a reference from official doumcn https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

I want to set two DropDownMenu the first is for zone and the second is for city, if user select the zone like East the second DropDownMenu should set the value E1、E2

Here is my code:

import React, { Component } from 'react';
import { View } from 'react-native';
import { DropDownMenu, Text } from '@shoutem/ui';

class TestConfirm extends Component {

    constructor(props) {
        super(props);
        this.state = {
          zone: [
            {
              id: 0,
              brand: "North",
              models:
                {
                  model: "Audi R8",
                  image: {
                    url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Audi-R8.jpg"
                  },
                  description: "North Description"
                },
                children: [{
                    name: "N1",
                    id: 10,
                  },{
                    name: "N2",
                    id: 17,
                  }]
              },
            {
              id: 1,
              brand: "West",
              models: {
                model: "Chiron",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Chiron.jpg"
                },
                description: "West Description"
              },
              children: [{
                name: "W1",
                id: 10,
              },{
                name: "W2",
                id: 17,
              }]
            },
            {
              id: 2,
              brand: "East",
              models: {
                model: "Dodge Viper",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"
                },
                description: "East Description"
              },
              children: [{
                name: "E1",
                id: 10,
              },{
                name: "E2",
                id: 17,
              }]
            },
          ],
        }
      }

  render() {
    const selectedZone = this.state.selectedZone || this.state.zone[0];
    console.log('selectedZone =>');
    console.log(selectedZone);
    console.log('selectedZone.children =>');
    console.log(selectedZone.children);
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={this.state.zone}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0]}
            onOptionSelected={(zone) => this.setState({ selectedZone: zone })}
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>

       <DropDownMenu
            styleName="horizontal"
            options={selectedZone.children}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0].children}
            onOptionSelected={(city) => this.setState({ selectedZone: city })}
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }
}

export default TestConfirm;

Here is my screen look like this:

If i select East it will show error

Invalid `selectedOption` {"id":2,"brand":"East","models":{"model":"Dodge Viper","image":{"url":"https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"},"description":"East Description"},"children":[{"name":"E1","id":10},{"name":"E2","id":17}]}, DropDownMenu `selectedOption` must be a member of `options`.Check that you are using the same reference in both `options` and `selectedOption`.

I check my console.log will look like this:

The key children under the name is what i want to put it into my second DropDownMenu

I have no idea how to do next step. Any help would be appreciated.

Thanks in advance.

Solution

selectedOption property for the DropDownMenu component expects a single object but this.state.zone[0].children is an array. You can change it to this.state.zone[0].children[0] to fixed the problem.

Also when you change the city dropdown you are updating the zone value in state. This will cause a bug. Try fixing it with setting a different value in state and checking that value for the city dropdown

Sample

render() {
    const { zone, selectedZone, selectedCity } = this.state
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={zone}
            selectedOption={selectedZone || zone[0]}
            onOptionSelected={(zone) => 
              this.setState({ selectedZone: zone, selectedCity: zone.children[0] } )
            }
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>
       <DropDownMenu
            styleName="horizontal"
            options={selectedZone ? selectedZone.children : zone[0].children } // check if zone selected or set the defaul zone children
            selectedOption={selectedCity || zone[0].children[0] } // set the selected city or default zone city children
            onOptionSelected={(city) => this.setState({ selectedCity: city })} // set the city on change
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }