How to avoid rendering items with same id in the flatList multiple times?

Question

I am getting strange data from the api.

The data is something list this

const dataArray = [
    { id: "PROD7", color: "green", weight: 2, price: 300 },
    { id: "PROD7", color: "red", weight: 2, price: 300 },
    { id: "PROD11", color: "cyan", weight: 4, price: 450 },
    { id: "PROD7", color: "yellow", weight: 2, price: 300 },
    { id: "PROD7", color: "blue", weight: 2, price: 300 },
];

As you can see the same id occurs multiple times. This is the product list api. And I got a fav list. which user set as fav.

const myFavIds = ["PROD7"];

What I am doing now is I am trying to render the myFavoriteList component so I am getting data from dataArray and checking if myFavIds in included in dataArray or not.

If included I am rendering the api. But the problem is that I am getting multiple same id So I want to avoid rendering the same id twice or thrice...

What I am using is flatList to render the component. Is there anyway to check the id and if there is a same id in previous cases. Avoid it.

Here is how I render the flatList

<FlatList
        data={dataArray}
        renderItem={renderItem}
        keyExtractor={(item, index) => String(index)}
/>

const renderItem = ({item, index}) => {
        if (favList.includes(item.id)) {
            return (
                <IndividualProduct
                    info={item}
                    index={index}
                    key={index}
                    fav={true}
                    stateChange={stateChange}
                    setLoading={setLoading}
                />
            );
        }
    };

Answer 1

Ideally, your API should not give you data that is misleading. Talk to your backend API developer to solve this.

Coming back to your question you can avoid your problem by using LODASH uniqBy function. For eg, in your case call.

var filteredArray = _.uniqBy(dataArray, 'id');

This will give you a filtered array with only unique id values. Now pass this to your flatlist and do the rest of your process.

Answer 2

Any "ID" should be different & unique. Looking at your data, there are different values for the same ID. If you can consider losing the data, then you can filter the array to include only the unique elements:

 const dataArray = [ { id: "PROD7", color: "green", weight: 2, price: 300 }, { id: "PROD7", color: "red", weight: 2, price: 300 }, { id: "PROD11", color: "cyan", weight: 4, price: 450 }, { id: "PROD7", color: "yellow", weight: 2, price: 300 }, { id: "PROD7", color: "blue", weight: 2, price: 300 }, ]; const uniqueArray = dataArray.filter(({ id }, i, _arr) => _arr.findIndex((elem) => elem.id === id ) === i); console.log(uniqueArray);

and pass the uniqueArray as prop.

<FlatList
        data={uniqueArray}
        renderItem={renderItem}
        keyExtractor={(item, index) => String(index)}
/>