S
SolidJS•2d ago
Paul

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:
The reactive variable 'local.duration' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored.
eslint(solid/reactivity)
The reactive variable 'local.duration' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored.
eslint(solid/reactivity)
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.
5 Replies
REEEEE
REEEEE•2d ago
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
Paul
PaulOP•2d ago
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? 🤔
REEEEE
REEEEE•2d ago
Nothing that I can see, but it probably has to do with the mount/unmounting
REEEEE
REEEEE•2d ago
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
Paul
PaulOP•2d ago
Thanks. I'll see if I can glean something to help.

Did you find this page helpful?