How to do conditional navigation in react native?

Question

Hello I'm trying to do conditional navigation in react native.In my project I'm listing a set of courses and categories as a result of an api fetch request.So after clicking on each course/category it will navigate to different screens.So What I want is on clicking on the courses in first screen I will get the type of currently selected item that whether it is course or category . So if selected item is couse I want to navigate to UnitListing screen and if it is category I want to navigate to ChapterListing screen.How is it possible?

updated

navigatetoPage = (category) =>{

      const page = category.type == "course" ? "UnitListing" : "ChapterListing";
       this.props.navigation.navigate(page, {
              id: category.id,
              type: category.type
       })

 }
render(){
  return(
    <View style={st.main_outer}>
            {this.state.cats.map(category =>

                                 <TouchableOpacity
  style={st.btn} onPress={() => this.navigatetoPage({category})}>
  <Text style={{ color: "#fff" }}>View Course</Text>
</TouchableOpacity>
                                 )}
  </View>
  );
}

How do I do conditional navigation here? Please help me to find a solution.

Answer 1

you can check type like this way and navigate also you can do in jsx. but this is much cleaner

  navigatetoPage(data){ const page = data.type == "course" ? "UnitListing" : "ChapterListing"; this.props.navigation.navigate(page, { id: data.id, type: data.type }) } <TouchableOpacity style={st.btn} onPress={() => this.navigatetoPage(data)}> <Text style={{ color: "#fff" }}>View Course</Text> </TouchableOpacity>