React Native Picker: Filter Specific and Duplicate Item

I am using React Native Picker.

I am calling an API which returns a list of State and City.

• For now, there are two State: Kuala Lumpur (state: 14) and Selangor (state: 10)

• state: 14 has two City: Kuala Lumpur (city: 262) and Sungai Besi (city: 263)

• state: 10 has one City: Puchong (city: 256)

The JSON data looks like this:

{
    "data": [
        {
            "city": "262",
            "state": "14",
            "city_desc": "Kuala Lumpur",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "263",
            "state": "14",
            "city_desc": "Sungai Besi",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "256",
            "state": "10",
            "city_desc": "Puchong",
            "state_desc": "Selangor"
        }
    ]
}

In my app, when I call the API, the Picker loads all the State and City.

However, is there anyway I can filter the State and City where I ONLY want to show the City based on the State selected?

i.e. If I select state: 14, the picker should ONLY show city: 262 and city: 263

or If I select state: 10, the picker should ONLY show city: 256

IMPORTANT NOTE: For now there are only two State in the data BUT in the future I will be adding multiple State which will consists of multiple City each. For example: state: A will have 5 cities, state: B will have 3 cities etc.

Please do let me know if there's any efficient way of filter City based on State selected and as always all help would be highly appreciated.

Code snippet provided below:

class ClientScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            pickerValueState: null,
            dataState: [],

            pickerValueCity: null,
            dataCity: [],

            isLoading: true,
        }
    }

    componentDidMount() {
        console.log('ComponentDidMount()');
        this.apiStateCity();
    }

    apiStateCity() {
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            axios({
                method: 'get',
                url: Constants.API_URL + 'user_c/c_State_City/',
                responseType: 'json',
                headers: {
                    'X-API-KEY': Constants.API_KEY,
                    'Authorization': keyValue,
                },
            })
                .then(function (response) {
                    console.log('apiStateCity Response: ', response.data.data);
                    self.setState({
                        dataState: response.data.data,
                    });
                })
                .catch(function (error) {
                    console.log('Error (1st): ', error);
                });
        }, (error) => {
            console.log('Error (2nd): ', error) //Display error
        });
    }

    stateList() {
        return (
            <View>
                <Text>Select Location</Text>
                <Text>State</Text>
                <View>
                    <Picker
                        mode="dropdown"
                        selectedValue={this.state.pickerValueState}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ pickerValueState: itemValue });
                            console.log('State selected (itemValue): ', itemValue);
                        }}
                    >
                        {
                            this.state.dataState.map((item, key) => (
                                <Picker.Item label={item.state_desc} value={item.state} key={key} />)
                            )
                        }
                    </Picker>
                </View>
            </View>
        );
    }

    cityList() {
        return (
            <View>
                <Text>City</Text>
                <View>
                    <Picker
                        mode="dropdown"
                        selectedValue={this.state.pickerValueCity}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ pickerValueCity: itemValue });
                            console.log('City selected (itemValue): ', itemValue);
                        }}
                    >
                        {
                            this.state.dataState.map((item, key) => (
                                <Picker.Item label={item.city_desc} value={item.city} key={key} />)
                            )
                        }
                    </Picker>
                </View>
            </View>
        );
    }

    render() {
        return (
            <View>
                <Text>BookingApp</Text>
                <View>
                    {this.stateList()}
                    {this.cityList()}
                    {this.button()}
                </View>
            </View>
        );
    }
}

ScreenShot from the App: