react-nativereact-native-flatlistconditional-rendering

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


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


Solution

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