CODEWITHSUNDEEP
javascriptreactjsreact-native
marahman
marahman

Reputation: 297

how to dynamically render view based from selected picker?

I need solution and help, I am new in reactJS and react-native. I want to render component view based on selected picker value, here is the example of my code

import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";
import { infoA } from "./InfoA";
import { infoB } from "./InfoB";
import { infoC } from "./InfoC";

export default class PickerSample extends Component {
  constructor(props){
    super(props);
    this.state = {
      selected: undefined
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  render(){
    return(
      <View>
        <Picker
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
        >
          <Picker.Item label="Information Item A" value=<InfoA/> />
          <Picker.Item label="Information Item B" value=<InfoB/> />
          <Picker.Item label="Information Item C" value=<InfoC/> />
        </Picker>
        {this.state.selected}
      </View>
    )
  }
}

is it possible to render the component as value of picker like that? or should I use switch() function or .map() function? or maybe is there any other effective way to achieve what I want?

Edited

Thanks to @Viet for fast respond, if it is possible to render the component as value of picker like the code example, may I know which part of the code goes wrong? it return error

Render Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

InfoA, InfoB, and InfoC Class Components are just a simple component with a single text component, here is the example code

import React, { Component } from "react";
import { Text } from "react-native";

export default class InfoA extends Component {
  render(){
    return(
      <Text> Information About Item A Explained Here </Text>
    )
  }
}

Edited Again Using solution from @Saiful Azam with switch function, It still give me error

Render Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

When I change the return statement inside the switch function with <Text> Component instead, it works with no error. does it mean I do something wrong with InfoA/InfoB/InfoC Component? does it mean the Component not Exported correctly? or is there anything else goes wrong?

Upvotes: 0

Views: 457

Answers (2)

Saiful Azam
Saiful Azam

Reputation: 107

Not familiar with the picker package but you can try this

import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";
import infoA  from "./InfoA";
import infoB from "./InfoB";
import infoC from "./InfoC";

export default class PickerSample extends Component {
  constructor(props){
    super(props);
    this.state = {
      selected: undefined
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
 renderSelectedItem(){
   switch(this.state.selected){
     case 'A':
        return <infoA />
      case 'B':
        return <infoB />
      case 'C':
        return <infoC />
      default:
        return null
   }
 }
  render(){
    return(
      <View>
        <Picker
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
        >
          <Picker.Item label="Information Item A" value="A" /> // value type should be string or number
          <Picker.Item label="Information Item B" value="B" />
          <Picker.Item label="Information Item C" value="C" />
        </Picker>
        {this.renderSelectedItem()}
      </View>
    )
  }
}

Upvotes: 1

NIV
NIV

Reputation: 486

You can conditionally render any component. Something like below is usually used to choose between 2 views. You can also use switch or if else stack for multiple views.

render() {
  return (
    this.state.selected ? (<View1/>) : (<View2>);
  );
}

Upvotes: 2

Related Questions