React-native if condition in List Item

Question

I have List that render an array how can i put an if condition statement ?.. for example

if (item.ticketId === 2) { and in the if statement the data render will be in different color }

do I need to create another function ?

           <Content>
                <ScrollView>
                <List>
                  { this.state.ticket.map((item, i) => (
                    <ListItem
                    roundAvatar
                    key={i}
                    avatar={
                      <View >
                        <Text>{item.ticketId}</Text>
                      </View>
                    }
                      title={
                        <View>
                          <Text>ROW :{item.row}</Text>
                        </View>
                      }
                      subtitle={
                        <View>
                          <Text>GATE :{item.gate}</Text>
                        </View>
                      }
                    />
                  ))
                  }
                  </List>
                </ScrollView>
              </Content>

Answer 1

I'd recommend to definitely move the mapping function to another function for improved readability. Then in it, you can either use standard if/else syntax or ternary expression :

renderListItem = (item, i) => {
    // you can use standard if/else
    if (item.ticketId === 2) {
        // render something you want
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={customStyleObject}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View style={customStyleObject}>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View style={customStyleObject}>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    } else {
        // or you can use ternary expressions for some smaller differences
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={item.ticketId===3 ? customStyle : standardStyle}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    }
}

Then call it in render method:

render() {
    return (
        <Content>
            <ScrollView>
                <List>
                    { this.state.ticket.map(this.renderListItem) }
                </List>
            </ScrollView>
        </Content>
    );
}

If you're interested in more ways to do conditioning in both react and react native, you can learn them here

Answer 2

You can use a conditional operator. Something like this

<View >
  <Text style={item.ticketID === 2 ? style1 : style2}>{item.ticketId}</Text>
</View>