React Native Picker: Set and Get different Picker Values

Question

I am working with React Native Picker and I have created two states: userType and name.

However, there are two userType: Freelancer, Client. There are also two name for each userType, and these are: Freelancer 1, Freelancer 2, and Client 1, Client 2.

Currently, I have two pickers. One has the userType and the other has name. Regardless of the userType selected, the 2nd picker shows all the name i.e Freelancer 1, Freelancer 2, Client 1, Client 2.

But this is what I am trying to achieve:

HOW TO: Instead of showing all the name, I want to show specific name depending on the userType selected. For example: if userType === Freelancer, then name picker should display only Freelancer 1, Freelancer 2. And, if userType === Client, then name picker should display only Client 1, Client 2.

Code snippet Provided Below:

constructor(props) {
    super(props);
    this.state = {
        userType: '',
        name: '',
    }
}

render() {
    return (
        <View>
            <View style={{ flexDirection: 'row' }}>
                <Text style={styles.titleStyle}>User Type</Text>
                <View style={styles.pickerStyle}>
                    {<Picker
                        mode='dropdown'
                        selectedValue={this.state.userType}
                        onValueChange={(itemValue, itemIndex) =>
                            this.setState({ userType: itemValue })
                        }>
                        <Picker.Item label="Select User Type" value="" />
                        <Picker.Item label="Freelancer" value="Freelancer" />
                        <Picker.Item label="Client" value="Client" />
                    </Picker>}
                </View>
            </View>
            <View style={{ flexDirection: 'row' }}>
                <Text style={styles.titleStyle}>Name</Text>
                <View style={styles.pickerStyle}>
                    {<Picker
                        mode='dropdown'
                        selectedValue={this.state.name}
                        onValueChange={(itemValue, itemIndex) =>
                            this.setState({ name: itemValue })
                        }>
                        <Picker.Item label="Please Select" value="" />
                        <Picker.Item label="Freelancer 1" value="Freelancer 1" />
                        <Picker.Item label="Freelancer 2" value="Freelancer 2" />
                        <Picker.Item label="Client 1" value="Client 1" />
                        <Picker.Item label="Client 2" value="Client 2" />
                    </Picker>}
                </View>
            </View>
        </View>
    );
};

App Screenshot:

Answer 1

you should have function that return usernames based on user type

renderUserNames() {
   if(this.state.userType=='Freelancer'){
    return [<Picker.Item label="Freelancer 1" value="Freelancer 1" />,
           <Picker.Item label="Freelancer 2" value="Freelancer 2" />]
   }else{
        return [<Picker.Item label="Client 1" value="Client 1" />,
         <Picker.Item label="Client 2" value="Client 2" />]
     }
}

then inside render function you can call i like

 render() {
let options=this.renderUserNames();
return (
    <View>
        <View style={{ flexDirection: 'row' }}>
            <Text style={styles.titleStyle}>User Type</Text>
            <View style={styles.pickerStyle}>
                {<Picker
                    mode='dropdown'
                    selectedValue={this.state.userType}
                    onValueChange={(itemValue, itemIndex) =>
                        this.setState({ userType: itemValue })
                    }>
                    <Picker.Item label="Select User Type" value="" />
                    <Picker.Item label="Freelancer" value="Freelancer" />
                    <Picker.Item label="Client" value="Client" />
                </Picker>}
            </View>
        </View>
        <View style={{ flexDirection: 'row' }}>
            <Text style={styles.titleStyle}>Name</Text>
            <View style={styles.pickerStyle}>
                {<Picker
                    mode='dropdown'
                    selectedValue={this.state.name}
                    onValueChange={(itemValue, itemIndex) =>
                        this.setState({ name: itemValue })
                    }>
                    <Picker.Item label="Please Select" value="" />
                         {options}

                </Picker>}
            </View>
        </View>
    </View>
);
 };