I gathered data from an API that provides information on country names and populations. The country names are displayed in a searchable flatlist. My objective is to show a small circle next to each country name in the flatlist based on its population size. If the population is above 100 million, the circle will be red. If it's between 10 million and 50 million, the circle will be orange. And if it's less than 10 million, the circle will be green. I'm using conditional rendering for this purpose, but I'm wondering if there's a better way to achieve the same result.
Here is my current code:
const [filteredData, setFilteredData] = useState<any>();
const [masterData, setMasterData] = useState([]);
const [filteredPopulationData, setFilteredPopulationData] = useState<any>();
const [masterPopulationData, setMasterPopulationData] = useState([]);
useEffect(() => {
fetchData();
return () => {};
}, []);
const fetchData = () => {
const apiURL =
"https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-population.json";
fetch(apiURL)
.then((response) => response.json())
.then((responseJson) => {
setFilteredStateData(responseJson);
setMasterStateData(responseJson);
})
.catch((error) => {
console.error(error);
});
};
const SearchFilter = (text) => {
if (text) {
const newData = filteredData.filter((item) => {
const itemData = item.country;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredData(newData);
setSearch(text);
} else {
setFilteredData(masterData);
setSearch(text);
}
if (text) {
const newPopulationData = filteredPopulationData.filter((item) => {
const itemPopulationData = item.population;
const textPopulationData = text.toUpperCase();
return itemPopulationData.indexOf(textPopulationData) > -1;
});
setFilteredPopulationData(newPopulationData);
setSearch(text);
} else {
setFilteredPopulationData(masterPopulationData);
setSearch(text);
}
const renderExtraItem = ({ item }) => {
if ((item.population < 10000000)) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "green",
}}
/>
);
} if ((item.population >= 10000000 && item.population < 50000000 )) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "orange",
}}
/>
);
} if ((item.population >= 100000000)) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "red",
}}
/>
);
}
};
const ItemView = ({ item }) => {
return (
<RectButton
onPress={() => navigate("LocationDataScreen", { name: item.country })}
>
<Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
{item.id}
{item.country.toUpperCase()}
</Text>
{renderExtraItem(item)}
</RectButton>
);
};
const ItemSeparatorView = () => {
return (
<View
style={{
height: 1.5,
width: "90%",
marginLeft: 35,
backgroundColor: "#f3f2f8",
}}
/>
);
};
return (
<FlatList
data={filteredData}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
style={styles.listcontainer}
/>
)