如何在反应本机的多个选择下拉字段中过滤数组值

Question

Suppose the bellow array values I have an array of lgas. Below there are 3 select fields, Lga, state and country. I have to get drop down value in lga field. If I select any value in the lga drop down then the value present in the same element should automatically appear in the state and country dropdown.

eg. If I select code BNG in lga then country India should be in country drop down and Karnataka value in state should display. Please help.

 // Array Value  
      masterData:
        lga: Array(1)
        0:
        code: "BNG"
        name: "BANGALORE"
        state:
        code: "KA"
        name: "KARNATAKA"
        __typename: "TroubleTicketMasterCode"
        __proto__: Object
       country:
        code: "IND"
        name: "INDIA"
        __typename: "TroubleTicketMasterCode"
        __proto__: Object 
        __typename: "Lga"
        1:
        code: "1234"
        name: "Mangalore"
        state:
        code: "700"
        name: "PARIS"
        __typename: "TroubleTicketMasterCode"
        __proto__: Object
       country:
        code: "NG"
        name: "NIGERIA"
        __typename: "TroubleTicketMasterCode"
        __proto__: Object
        __typename: "Lga"

    // Select field 

                        <SelectField
                            label="Lga"
                            node="lga"
                            options={lga}
                            value={}
                            onChange={this.lgachanges}
                            that={this}
                            setIcon={true}

                          />

                          <SelectField
                            label="State"
                            options={}
                            value={}
                            node="state"
                            onChange={}
                            that={this}
                            setIcon={true}

                          />

                          <SelectField
                            label="Country"
                            options={}
                            value={}
                            node="country"
                            onChange={}
                            that={this}
                            setIcon={true}

                          />

Thanks

Answer 1

lgachanges = event => {
  const temp = lga.find(element =>  element.code === event.target.value)

  this.setState({
    lga: temp.name,
    country: temp.country.name,
    state: temp.state.name,
  })
}

In each Select:

 value={this.state. ...} //lga, country, state