I was trying to create a To Do List App and I am one step away from completion.
I set the class of a div using a conditional inside of a string literal and the condition was a Boolean state of the app.
I can select the normal class but not the class that that is set when the condition is met. I can style it using CSS but not select it using Jquery. Really bugging me being one step away from completion of the app.
Nope Doesn’t work. Had tried it before and tried again too. I can style those classes : container2 with CSS but I cannot select it using Document.querySelector(). I guess because it doesn’t exist in the document which I guess the query selector searches for when it doesn’t find then nothing happens. Don’t know how to solve it.
The above change doesn’t do anything different to what you already have, so yep it’s not going to make any difference. Why on earth are you trying to do this from outside the app?
(Edit: for clarity, React provides (and has always provided) imperative access via refs)
Added classes wont be selected because the script was launched before they was added, you need to refresh the script every time the showAddTask evaluate to true. THE SCRIPT IS LAUNCHED ONLY ONCE, since page doesnt refresh.
Just add the effect by UseEffect hook which will depend of the state of showAddTask.,
in the component where you use it, get a ref to the element you’re going to attach it to.
you seem to want to turn the effect on and off, so you will need to use state as well
in a useEffect, attach the VanillaTilt code to the element, which is going to be referenced (natch) by that ref
in the return value of the useEffect, run the destroy method of VanillaTilt
Trying to use DOM query API on a React app from outside the app is a bit crackers: one of the primary reasons for using React in the first place is not to need that. And you’re going to get into race condition situations.
Also note the library you’re using seems to do pretty bad stuff to mobile browsers (it has no visible effects as you can’t hover on mobile, but it still thinks it’s running at full-pelt, the example seem likely to cause big memory leaks afaik)