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)

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.

Learning solid and need some understanding

Similar Threads

Similar Threads

Similar Threads