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

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 : 'pleted }), 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 ponent let caseView = <PendingCases />

my _handleCaseView()

_handleCaseView = () => {
    switch (this.state.selectedPage) {
      case "pleted":
        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 : "pleted" }) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/pleted.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 : 'pleted' }
  }

  renderCaseView = (param) => {
    switch (param) {
      case "pleted":
        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;
    }
  }

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

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 : 'pleted }), 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 ponent let caseView = <PendingCases />

my _handleCaseView()

_handleCaseView = () => {
    switch (this.state.selectedPage) {
      case "pleted":
        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 : "pleted" }) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/pleted.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 : 'pleted' }
  }

  renderCaseView = (param) => {
    switch (param) {
      case "pleted":
        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;
    }
  }

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Aug 27, 2018 at 14:08 Abdulelah asked Aug 27, 2018 at 11:04 AbdulelahAbdulelah 69111 gold badge1717 silver badges3939 bronze badges 4

• You don't have to use setState callback - you can use this kind of logic inside render 'body' (before return) or call function from render (param/switch/return <Component>) – xadm Commented Aug 27, 2018 at 11:17
• Did you put any logs inside the _handleCaseView to make sure that is changing? Maybe is a good idea to use this._handleCaseView() inside your render method – Marcos Schroh Commented Aug 27, 2018 at 11:18
• @xadm i'm sorry could you explain it a little more ? i'm not sure i quite got your answer – Abdulelah Commented Aug 27, 2018 at 11:20
• Just call {this._handleCaseView()} inside your render method – Marcos Schroh Commented Aug 27, 2018 at 11:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 : 'pleted' }); // 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 : 'pleted' }, () => this.handleCaseView());
}

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

render() {
  const ChoosenView = this.state.selectedPage ? <Completed /> : <Delayed />
  // or more plicated 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 "pleted":
        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)}