CODEWITHSUNDEEP
javascriptreact-native
Yewon Kim
Yewon Kim

Reputation: 53

How can I get label from Picker onValueChange in react-native

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

Answers (1)

Hamas Hassan
Hamas Hassan

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

Related Questions