Deleting/Updating nested object using React Hooks - reactjs

Question

I am relatively new to react-native programming language. I've been trying to make my first standalone application, which of course is To Do List app.
I have to do items under their own respective categories. The source of these to do items is a predefined object as shown below.
const [listData, setListData] = useState([
{
id: 1,
title: "Work",
data: [
{
text: 'MSD',
key: 1
},
{
text: 'Cosmo',
key: 2
},
{
text: 'Jackson',
key: 3
},
]
},
{
id: 2,
title: "Home",
data: [
{
text: 'Gym',
key: 4
},
{
text: 'Dinner',
key: 5
},
{
text: 'React',
key: 6
},
]
},
]);
This data is defined inside the main function App(). The data renders perfectly on screen with the below code.
Home Screen Image
return(
<View style={styles.container}>
<Header />
<SectionList
sections={listData}
keyExtractor={(item, index) => item + index}
renderSectionHeader={({
section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
renderItem={({ item }) => <Item data={item.text} dataID={item.key} onDeleteHandler={onDeleteHandler}/>}
/>
</View>
)
Item component code is -
const Item = ({ data, dataID, onDeleteHandler }) => {
const [checked, setChecked] = React.useState(false);
return(
<View style={styles.itemGroup}>
<TouchableOpacity style={styles.item} onPress={() => {
if (checked == true){
setChecked(false)
}
else{
setChecked(true)
}
}}>
<View>
<Text style={checked === true ? styles.toDoTextStrikeThrough : styles.toDoText}>{data}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => onDeleteHandler(dataID)}>
<View style={styles.checkBoxAndDeleteStyle}>
<Entypo name="cross" color='#004d4d' size={18}/>
</View>
</TouchableOpacity>
</View>
)
};
export default Item;
The bit where i'm stuck at is the delete button which invokes the below function.
const onDeleteHandler = (key) => {
const parentArray = [...listData]
for (let i = 0; i < parentArray.length; i++)
{
let paDataItems = {...parentArray[i]}.data
const dataArray = [...paDataItems]
for (let k = 0; k < dataArray.length; k++){
if (dataArray[k].key === key){
dataArray.splice(k,1)
break
}
}
console.log(dataArray)
}
}
dataArray shows all the correct objects. I am not able to figure out how to update this back to the main dataset.
I've tried the below two methods and both result in weird behaviours.
setListData((paDataItems) => [...paDataItems,{data:dataArray}])
setListData([{...parentArray[i]}, {data:dataArray}])
How should I write this function so I can delete the selected item?
I'm guessing I should be able to figure out how to update the dataset once I have a solution to the above problem.
Any help would be appreciated. Thank you.

Answer 1

You can map the groups/categories and filter the data array:
const onDeleteHandler = key => {
const newData = listData.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
);
setListData(newData);
};
It may be more correct to use a functional state update since the next state depends on the previous state having an task item deleted correctly in the case that multiple state updates are queued up within a single render cycle:
const onDeleteHandler = key => {
setListData(listData => listData.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
));
};
let data = [{
id: 1,
title: "Work",
data: [{
text: 'MSD',
key: 1
},
{
text: 'Cosmo',
key: 2
},
{
text: 'Jackson',
key: 3
},
]
},
{
id: 2,
title: "Home",
data: [{
text: 'Gym',
key: 4
},
{
text: 'Dinner',
key: 5
},
{
text: 'React',
key: 6
},
]
},
];
const onDeleteHandler = key => {
const newData = data.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
);
return newData;
};
console.log(onDeleteHandler(3))

Answer 2

You can simplify your onDeleteHandler function like this:
const newData = listData.map(group => {
return {
...group,
data: group.data.filter(task => task.key !== key)
}
})
setListData(newData);