I'm developing a chatting app and want to add a button to delete messages. I'm using react and firebase and I want a button to delete documents from the web app with a button but I've no clue how to.
I tried:
const { text, uid } = props.message;
const messageClass = uid === auth.currentUser.uid ? "sent" : "received";
return (
<>
<div className={`message ${messageClass}`}>
<p>{text}</p>
<button onClick={firestore.collection("messages").doc().delete()}>
Delete
</button>
</div>
</>
);
}
React returns: Error: Expected onClick listener to be a function, instead got a value of object type. at me and I'm clueless as to what to do.
React onClick expects a function you should write:
<button onClick={() => firestore.collection("messages").doc().delete()}>
The reason your code fails is because you are evaluating the delete instead of passing it for react to call when you click the button.
<button onClick={firestore.collection("messages").doc().delete}>
Should also work, notice the lack of parentheses on delete.
You can read more about react events here