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
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.