I'm new to React and Firebase, and I got a problem where the delete document function doesn't get called and no errors were caught. The function deleteItemHandler( ) does run, but the deleteDoc( ) doesn't. I have changed rules and make sure the imports are correct, yet it still won't work.
deleteItemHandler( ), App.jsx
//? Delete item function
const deleteItemHandler = async (id) => {
try {
await deleteDoc(doc(db, "items", id));
}
catch (error) {
console.log(error);
}
}
Delete Button, YourCard.jsx
<button
className="btn btn-danger ms-2"
onClick={() => {
// console.log(props.name)
props.deleteItemHandler(props.id)
}}
>
Delete
</button>
Note update: props passing App.jsx to UserIdentity.jsx
<UserIdentity
className="userId"
currentUser={username}
loginHandler={loginHandler}
logoutHandler={logoutHandler}
addListingHandler={addListingHandler}
//? for YourCard
itemsFromDB={itemsFromDB}
deleteItemHandler={deleteItemHandler}
/>
UserIdentity.jsx to YourCard.jsx
{yourItems.map((item) => {
return (
<YourCard
// className="YourCard"
name={item.name}
id={item.id}
key={item.id}
deleteItemHandler={props.deleteItemHandler}
/>
);
})}
im thinking you're not handling props correctly
const App = () => {
const deleteItemHandler = async (id) => {
await deleteDoc(doc(db, "cities", id));
}
return (
<YourCard deleteItemHandler={deleteItemHandler} id={someId}}
)
child
export const YourCard = ({deleteItemHandler, id}) => {
return (
<button
className="btn btn-danger ms-2"
onClick={() => deleteItemHandler(id)}
>
Delete
</button>
)
Finally figured out that the problem lies on addDoc(), which adds new document with yc2 type while deleteDoc() searches documents with mc2 type. Changed the add method to setDoc() fixes it.