I’m trying to delete an item from the specific column that it is in, and render the component so it will disappear immediately.
in the application I have 4 columns and orders that are fetched from an api
this is the useState and useEffect that I have created so far
const [orders, setOrders] = useState([]);
const [columns, setColumns] = useState([]);
const [columnsCopy, setColumnsCopy] = useState([]);
useEffect(() => {
props.fetchOrder(setOrders)
},[])
console.log(orders);
useEffect( () => {
setColumns(() => {
return {
newOrder:{
name: "Requested",
items: orders,
},
inProgres: {
name: "In Progres",
items: [],
},
finished: {
name: "Finished",
items: [],
},
deliverd: {
name: "Deliverd",
items: [],
},
}})
console.log(columns)
}, [orders]);
useEffect( () => {
setColumnsCopy((prevState) => {
return {
...prevState,
...columns,
}})
}, [columns]);
console.log(columnsCopy)and this is the deleteItem function
const deleteItem = ( item, columnsCopy, setColumnsCopy) => {
const itemId = item._id
const itemsArray = [columnsCopy];
itemsArray.splice(item.index , 1);
setColumnsCopy((prevState) => {
return {
...prevState,
...itemsArray
}
})
dispatch(deleteOrder(itemId));
console.log(itemId);
};so what is happening so far the items are being deleted but the component doesn’t change, only when I refresh the page the item has disappeared. Also all of the orders comes back to the first column.
so what do I do to render the component correctly and that the orders will keep their positions?
Thank you in advance