Is there a possible way to have conditional rendering inside of flatlist in react native?

Question

In the below flatlist the values of event.Tr1C2 may come as undefined in response I would like to display the whole text component only if the value is not undefined and would like to hide the component if value is undefined

<FlatList
data={myData}
renderItem={({ item }) => {
    return (
        <View >
        <View style={hr101} />
        <Text style={league}>{item.Snm}</Text>
        <Text style={league2}>{item.Cnm}</Text>
        <View>{
        item.Events.map((event) => <View style={match}>
        <Text style={league2}>{event.EtTx}-{event.ErnInf}</Text>
        <Text style={status1}>{event.EpsL}</Text>
        <View style={hr100} />
        <Text style={teams1}>{event.T1[0].Nm} </Text>
        <Text style={teams}>{event.Tr1C1}-{event.Tr1CW1} ({event.Tr1CO1} Ovs)</Text>
        <Text style={teams}>& {event.Tr1C2}-{event.Tr1CW2} ({event.Tr1CO2} Ovs)</Text>
        \\above line
        <View style={hr100} />
        <Text style={teams1}>& {event.T2[0].Nm} </Text>
        <Text style={teams}>{event.Tr2C1}-{event.Tr2CW1} ({event.Tr2CO1} Ovs)</Text>
        <Text style={teams}>& {event.Tr2C2}-{event.Tr2CW2} ({event.Tr2CO2} Ovs)</Text>
        \\this line too
        <View style={hr100} />
        <Text style={result}>{event.ECo}</Text>
        </View>)
        </View>
        </View>
           )
     } 
   }
/>

I have tried creating a whole different component for that part by using if else too too but its still not working , a help would be appreciated

Answer 1

Yes !!

We can add conditions in the flatlist using tenrary operator . If i rewrite your code it would be look like this :

<FlatList
  data={myData}
  renderItem={({ item }) => {
    return (
      <View>
        <View style={hr101} />
        <Text style={league}>{item.Snm}</Text>
        <Text style={league2}>{item.Cnm}</Text>
        <View>
          {item.Events.map((event) => (
            <View style={match}>
              <Text style={league2}>{event.EtTx}-{event.ErnInf}</Text>
              <Text style={status1}>{event.EpsL}</Text>
              <View style={hr100} />
              <Text style={teams1}>{event.T1[0].Nm} </Text>
              <Text style={teams}>
/*Here i added condition if it is not undefined then it will run this else other part*/

                {event.Tr1C2 !== undefined ? (
                  <Text>
                    {event.Tr1C1}-{event.Tr1CW1} ({event.Tr1CO1} Ovs) &{" "}
                    {event.Tr1C2}-{event.Tr1CW2} ({event.Tr1CO2} Ovs)
                  </Text>
                ) : (
                  <Text>
                    {event.Tr1C1}-{event.Tr1CW1} ({event.Tr1CO1} Ovs)
                  </Text>
                )}
              </Text>
              <View style={hr100} />
              <Text style={teams1}>& {event.T2[0].Nm} </Text>
              <Text style={teams}>
                {event.Tr2C1}-{event.Tr2CW1} ({event.Tr2CO1} Ovs) &{" "}
                {event.Tr2C2}-{event.Tr2CW2} ({event.Tr2CO2} Ovs)
              </Text>
              <View style={hr100} />
              <Text style={result}>{event.ECo}</Text>
            </View>
          ))}
        </View>
      </View>
    );
  }}
/> 

Hope this will solve your problem.