React Native Conditional onPress in List Item

Question

I am generating a list with List item in React native, and for a specific reason I want the first item to navigate to a different screen and all other item to a different screen.

I am putting the condition with ternary operator for the same but there is no success

<View style={{flex: 1, backgroundColor: '#fff'}}>
                    <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                    <FlatList
                        data={this.state.schools}
                        renderItem={({ item }) => ({
                        item.school_name == "all" ?
                        <ListItem
                            title={item.school_name}
                            onPress={()=>this.props.navigation.navigate('DepartmentSchools', {
                                school_name: item.school_name,
                                school_id : item.school_id
                            })}
                        /> : 
                        <ListItem
                            title={item.school_name}
                            onPress={()=>this.props.navigation.navigate('DepartmentIndividual', {
                                school_name: item.school_name,
                                school_id : item.school_id
                            })}
                        />
                        })}
                        keyExtractor={item => item.school_name}
                        ItemSeparatorComponent={this.renderSeparator}
                    />
                    </List>
                    </View>

Please help in resolve this or you can point out my mistake.

Thanks in advance.

What is `List` and `ListItem` and secondly what issue are you getting? Thanks — Pritish Vaidya, Aug 17 '18 at 14:00
Please check out this [post](https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons) to understand why `==` is not `===` and when you should use what. — student96, Aug 17 '18 at 14:23

score 1 · Answer 1 · answered Aug 17 '18 at 14:14

Move the condition to the onPress handler like this :

 <FlatList
       data={this.state.schools}
       renderItem={({ item }) => (
                    <ListItem
                        title={item.school_name}
                        onPress= {
                          ()=>{
                             let destination = item.school_name === "all" ? "DepartmentSchools" : "DepartmentIndividual";
                             this.props.navigation.navigate(destination, {
                                school_name: item.school_name,
                                school_id : item.school_id
                             });
                           }
                        }
                    />
                  )}
      keyExtractor={item => item.school_name}
      ItemSeparatorComponent={this.renderSeparator}
   />

React Native Conditional onPress in List Item

1 Answers1