This is a great question and you're absolutely right! As explained in the React hooks FAQ you'd want useRef in this case. This will ensure we get the .current instance of the DOM element that's synched with the React lifecycle. I've updated the Toast example accordingly...
For some or maybe most of these examples you should probably also add an empty array for the useEffect dependencies. Basically saying that we only want to run this code once (to create the component), then it does not have to run again as long as the component is left in the DOM tree.
But then the bsToast.show() or bsToast.hide() wouldn't trigger when the state of toast changes. In my case I only added [toast] to the useEffect dependencies.
This is a great question and you're absolutely right! As explained in the React hooks FAQ you'd want
useRef
in this case. This will ensure we get the.current
instance of the DOM element that's synched with the React lifecycle. I've updated the Toast example accordingly...I also updated the other examples to follow this same pattern.
why the error 'bootstrap' is not defined appear? the bootstrap.Toast give error. where the bootstrap comes from?
For some or maybe most of these examples you should probably also add an empty array for the useEffect dependencies. Basically saying that we only want to run this code once (to create the component), then it does not have to run again as long as the component is left in the DOM tree.
But then the
bsToast.show()
orbsToast.hide()
wouldn't trigger when the state oftoast
changes. In my case I only added[toast]
to the useEffect dependencies.Thank you for the article, I have checked the examples and still can't be sure if it is okay to use bs components with only data-bs attribute.
Is it a bad practice for React virtual dom to use it like below.