Reputation: 53
I want to get the value of items(in RNPickerSelect).
ex1) if my items is uc
, then I want to get the label("ucCollege") as this.state.text
.
ex2) if this.state.main_cate is "portal"
, then I want to get the label of const nul.
Finally I want to print the label as text like last code line.
How can I do this?
const uc = [
{
label: "ucCollege",
value: "uc",
},
];
const isa = [
{
label: "isaCollege",
value: "isa",
},
];
const nul = [
{
label: "nulCollege",
value: "nul",
},
];
export default class URL extends Component {
constructor(props) {
super(props);
this.state = {
main_cate: undefined,
sub_cate: undefined,
text: undefined,
};
}
render() {
return (
<View>
...
<RNPickerSelect
placeholder={sub_placeholder}
items={
this.state.main_cate === "portal"
? nul
: this.state.main_cate === "uc"
? uc
: isa (Actually there is more, but i comfortably omit that)
}
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
text: items[index].label, // this is the point !!!
});
}}
value={this.state.sub_cate}
//label={this.state.sub_cate}
/>
<Text>{this.state.text}</Text> // And I want to print text like this
</View>
);
}
}
Upvotes: 2
Views: 1023
Reputation: 941
instead of items, you can directly reference your uc array like this and the index will pick the label.
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
text: uc[index].label, // this is the point !!!
});
}}
Complete Code:
const uc = [
{
label: "ucCollege",
value: "uc",
},
];
const isa = [
{
label: "isaCollege",
value: "isa",
},
];
const nul = [
{
label: "nulCollege",
value: "nul",
},
];
export default class URL extends Component {
constructor(props) {
super(props);
this.state = {
main_cate: undefined,
sub_cate: undefined,
text: undefined,
};
}
render() {
return (
<View>
...
<RNPickerSelect
placeholder={sub_placeholder}
items={
this.state.main_cate === "portal"
? nul
: this.state.main_cate === "uc"
? uc
: isa //(Actually there is more, but i comfortably omit that)
}
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
// instead of items you can directly refference your uc array like this
text: uc[index].label, // this is the point !!!
});
}}
value={this.state.sub_cate}
//label={this.state.sub_cate}
/>
<Text>{this.state.text}</Text> // And I want to print text like this
</View>
);
}
I hope this will help you out!
Upvotes: 1