Групировать одинаковые items во flatlist
Как групировать одинаковые items во flatlist, или не выводить повторы даты и задания например, или чем другим реализовать подобную задачу?
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
date: 'Thursday 10 December 2020р',
title: 'WORK1',
firm: 'John',
type: 'todo',
},
{
id: 'bd7acbea-c1b1-46c2-aed5-5ad53abb28ba',
date: 'Thursday 10 December 2020р',
title: 'WORK1',
firm: 'Dan',
type: 'todo',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
date: 'Thursday 10 December 2020р',
title: 'WORK2',
firm: 'Dan',
type: 'todo',
},
{
id: '3ac68afc-c605-48d3-a4f8-f3d91aa97f63',
date: 'Friday 11 December 2020р',
title: 'WORK2',
firm: 'Dan',
type: 'todo',
},
];
const DateItem = ({date}) => (
<View style={styles.date}>
<Text style={styles.dateText}>{date}</Text>
</View>
)
const TitleItem = ({title}) => (
<View style={styles.title}>
<Text style={styles.titleText}>{title}</Text>
</View>
)
const FirmItem = ({firm}) => (
<View style={styles.firm}>
<Text style={styles.firmText}>{firm}</Text>
</View>
)
const renderItems = ({ item }) => {
return(
<View style={styles.item}>
<DateItem date={item.date} />
<TitleItem title={item.title} />
<FirmItem firm={item.firm} />
</View>
);
}
const FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
const ToDoScreen = (props) => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItems}
ItemSeparatorComponent = { FlatListItemSeparator }
keyExtractor={item => item.id}
/>
</SafeAreaView>
)
}

