React native, load component on button click

Question

I have a react-native project in which I want to render a component on a button click .. the buttons are displayed as a bottom bar, in which every button should render a component.

I tried to set the state like this :

constructor(props){
    super(props);
    this.state = { selectedPage : '' }
}

And in my buttons I tried to set the state of each button to a value :

<TouchableOpacity onPress={ () => this.setState({ selectedPage : 'completed }), this._handleCaseView() }> Completed </TouchableOpacity>

Then I tried to change the value of a variable defined in the render() method with default value of an imported component let caseView = <PendingCases />

my _handleCaseView()

_handleCaseView = () => {
    switch (this.state.selectedPage) {
      case "completed":
        this.caseView = <Text> Completed </Text>;
        break;
      case "delayed":
        this.caseView = <Text> Delayed </Text>;
        break;
      case "all":
        this.caseView = <PendingCases />;
        break;
      case "approved":
        this.caseView = <Text> Approved </Text>;
        break;
      case "set-by-doctor":
        this.caseView = <Text> SET BY DOCTOR </Text>;
        break;
      default:
        this.caseView = <PendingCases />;
    }
  }

Then in my render method <View> { this.caseView } </View>

The problem is that the value isn't getting set, is there a simpler approach ?

--UPDATE--

here is my render() function

return (

      <DrawerLayoutAndroid
        drawerWidth={200}
        drawerPosition={DrawerLayoutAndroid.positions.Right}
        renderNavigationView={() => navigationView}
      >

          <View style={{ flex : 1, flexDirection: 'column', backgroundColor: 'rgb(250, 250, 250)' }}>

          <HeaderWText header="Cases" />

          <View style={ styles.pageBody }>

          <View> { this.renderCaseView(this.state.selectedPage) } </View>

          </View>

        </View>

        <View style={{ height: 70, position: 'absolute', bottom: 0, left: 0, right: 0, borderTopColor: 'rgba(0, 0, 0, .2)', borderTopWidth: 1, flex: 1, flexDirection: 'row'}}>
          <TouchableOpacity onPress={ () => this.setState({ selectedPage : "completed" }) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/completed.png')} />
            <Text style={{ textAlign: 'center', fontSize: 12}}>Completed</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={ () => this.setState({ selectedPage : "delayed"}) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/delayed.png')} />
            <Text style={{ textAlign: 'center', fontSize: 12}}>Delayed</Text>
            </View>
          </TouchableOpacity>
        </View>

      </DrawerLayoutAndroid>

    )

my constructor() and renderCaseView()

    constructor(props) {
    super(props);
    this.state = { selectedPage : 'completed' }
  }

  renderCaseView = (param) => {
    switch (param) {
      case "completed":
        return <PendingCases />;
        break;
      case "delayed":
        return <Text> Delayed </Text>;
        break;
      case "all":
        return <PendingCases />;
        break;
      case "approved":
        return <Text> Approved </Text>;
        break;
      case "set-by-doctor":
        return <Text> SET BY DOCTOR </Text>;
        break;
    }
  }

Answer 1

There're a few methods, you can extend render method with logic like this:

render() {
  const ChoosenView = this.state.selectedPage ? <Completed /> : <Delayed />
  // or more complicated vanilla js logic
  // call parametrized method, etc
  // to prepare 'visual parts'

  return (
    <Layout>
      {ChoosenView}
    </Layout>
  )
}

you can refactor _handleCaseView to

renderCaseView = (param) => {
    // you can use Map/object definitions instead of switch
    switch (param) {
      case "completed":
        return <Text> Completed </Text>;
      case "delayed":
        return <Text> Delayed </Text>;
      case "all":
        return <PendingCases />;
      case "approved":
        return <Text> Approved </Text>;
      case "set-by-doctor":
        return <Text> SET BY DOCTOR </Text>;
      default:
        return <PendingCases />;
    }
}

and use it in render directly

{this.renderCaseView(this.state.selectedPage)}

Answer 2

You need to wrap your onPress event to return a single function, right now you're returning multiple functions to it.

onPress={ () => {
  this.setState({ selectedPage : 'completed' }); // Your Updater function
  this._handleCaseView()
}

Another thing to note is , since handleCaseView is dependant on state and you're calling them async, therefore you need to call it once the state has finished updating in the setState callback parameter.

onPress={ () => {
      this.setState({ selectedPage : 'completed' }, () => this.handleCaseView());
}