using custom hook to show and hide toast, it works fine when showTost is invoked in Toast component button when use this hook outside i.e in App component button getting error
TypeError
Cannot read properties of null (reading 'defaultPrevented')
Toast.show
https://izso9.csb.app/node_modules/bootstrap/dist/js/bootstrap.esm.js:3399:19
showToast
/src/useToast.js:11:12
8 |
9 | const showToast = () => {
10 | bsToast = new Toast(myToast, { autohide: true, delay: 1000 });
> 11 | bsToast.show();
| ^
12 | };
13 |
14 | const hideToast = () => {
View compiled
useToast.js
import { Toast } from "bootstrap";
import { useRef } from "react";
export default function useToast() {
const toastRef = useRef();
let myToast = toastRef.current;
let bsToast = Toast.getInstance(myToast);
const showToast = () => {
bsToast = new Toast(myToast, { autohide: true, delay: 1000 });
bsToast.show();
};
const hideToast = () => {
bsToast = new Toast(myToast, { autohide: true });
bsToast.hide();
};
return { toastRef, showToast, hideToast };
}
That's because you don't pass the toastRef from the App component and it's undefined. If you add this piece of code inside the App component, it's going to work
<div
className="toast position-absolute bottom-0 end-0 m-4"
role="alert"
ref={toastRef}
>
<div className="toast-header">
<strong className="me-auto">Bootstrap 5</strong>
<small>4 mins ago</small>
<button
type="button"
className="btn-close"
onClick={hideToast}
aria-label="Close"
></button>
</div>
<div className="toast-body">Hello, world! This is a toast message.</div>
</div>
I used bootstrap 5 with Vuejs and had the same error. I found that the same error appears when Toast is created in one place(on component creation) and I'm calling toast.show() in another place(on component update).
Here is example:
export default {
props: {
toastHeader: String,
toastBody: String,
isHidden: Boolean
},
data() {
return {
toast: null
}
},
created(){
//here toast initialized when component is created
this.toast = new Toast(document.getElementById("bootstrap-toast"));
},
updated(){
//component is updated, so toast is recreated in DOM. Error thrown
if(!this.isHidden) this.toast.show();
}
}
To resolve this I did the following:
export default {
props: {
toastHeader: String,
toastBody: String,
isHidden: Boolean
},
updated(){
let toast = new Toast(document.getElementById("bootstrap-toast"));
if(!this.isHidden) toast.show();
}
}
Probably in your case, there is the same case. So, toastRef.current might contain something invalid at the moment toast show / hide triggered. Try to use document.getElementById inside new Toast() just to check if it is the exact case as mine. I know that it seems weird to use document.getElementById . At least it will give you an idea where is the problem is.