CODEWITHSUNDEEP
react-native
John Ocean
John Ocean

Reputation: 496

How to show different color/text inn flatlist for specific details in react native?

I want to show different text color if gender is male & also on second condition if gender is female then it change text female to "oops" on screen in flatlist.

below is my code:

const API_ENDPOINT = `https://randomuser.me/api/?seed=1&page=1&results=20`;
  const [fullData, setFullData] = useState([]);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch(API_ENDPOINT)
      .then((response) => response.json())
      .then((response) => {
        setProducts(response.results);
        setFullData(response.results);
      });
  }, []);

<FlatList
        data={products}
        keyExtractor={(item) => item.email}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <View style={styles.metaInfo}>
              <Text style={styles.title}>{item.name.first}</Text>
              <Text style={styles.title}>{item.gender}</Text>
              <Text style={{ color: 'blue' }}>{item.gender}</Text>
            </View>
          </View>
        )}
      />

Upvotes: 0

Views: 312

Answers (1)

yoann84
yoann84

Reputation: 810

You need to pass conditional statement in the style attribute and also in the Text JSX :

  <Text style={item.gender === "male" ?  { color: 'blue' } : {color: "red"}}>{item.gender === "male" ? item.gender : "oops"}</Text>

Upvotes: 2

Related Questions