Learning solid and need some understanding
Hey all. I have created a sandbox here: https://playground.solidjs.com/anonymous/797a7004-7703-4e4c-a72d-cef2e4baae26
The react for reference: https://playcode.io/2374626
The result of the toggle, is that a div should expand and then contract. But instead showing and then hiding. 😩
It's originally react code and moved to solidjs.
Here's my confusion:
There are a lot of yellow underlines with the warning:
A lot of the props are going to be static. Hence I'm only tracking mounted and following on from that transitionStatus works as well.
So I don't understand the warning.
Can anyone provide some clarity! Thanks!
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
PlayCode.io
React TypeScript Playground Hooks
Try this online React TypeScript Playground Hooks playground with instant live preview and console. Easy & Fast. Experiment yourself.
7 Replies
The eslint plugin isn't perfect at knowing your use cases so it's showing a false positive. It's trying to tell you if you want this to be reactive, read it in the jsx, an effect, or in an event handler
It's safe to ignore if you want the values to be static
Ok awesome. Now the other question. I don't know why my code is not working 100% correctly. Why the animation doesn't work. To me, with my limited solidjs it all looks correct. But I am obviously missing something.
Can you see something that sticks out? 🤔
Nothing that I can see, but it probably has to do with the mount/unmounting
You can take a look at how solid-primitives and transition-group does it
https://github.com/solidjs-community/solid-primitives/tree/main/packages/transition-group#readme
https://github.com/solidjs-community/solid-transition-group
GitHub
GitHub - solidjs-community/solid-transition-group: SolidJS componen...
SolidJS components for applying animations when children elements enter or leave the DOM. - solidjs-community/solid-transition-group
GitHub
solid-primitives/packages/transition-group at main · solidjs-commu...
A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives
Thanks. I'll see if I can glean something to help.
I managed to get a working solution using transition-group.
https://playground.solidjs.com/anonymous/5988ff07-02f8-490b-b6bb-98f64f84125c
For whatever reason. requestAnimationFrame does not work the same for solidjs. I don't know what the gotchas are here. But I'm happy I have found a solution.
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
@REEEEE Thanks so much for your help!