Solid.js event handler that depend on reactive value best practice (fix solid/reactivity lint rule)
Hi, I want to know what is the best practice for using event handers in solid.js that depend on reactive variables from different scopes.
I want to create an abstraction over my component library, and I'm unsure what the recommended way is.
I created a counter and 3 buttons that print the counter value onClick.
I want to increase the count and the button to print the latest count. So button 2 does not work well.
But for all the buttons I get lint error.
I added a playground link:
https://playground.solidjs.com/anonymous/f6da6ee2-fe3e-4d99-b840-7e3dbb9eb4e4
How to handle this case?
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
6 Replies
I've seen these too but I'm wondering if it's not an issue with eslint plugin solid. I don't see anything wrong to how you pass the onClick event handler to your component in your first button.
I'd love, however, know if it's really just an issue with the eslint plugin or if there's a better way to do this.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Hi Josh,
Im quite new to SolidJS, been mostly working with react. In react, because of its nature, we try to avoid passing a callback to a component like this
<button onClick={() => props.onClick()}>My button</button> , I try to always do <button onClick={props.onClick}>My button</button> however, you are saying that, in SolidJS we should do as the first example? Is this because the nature of SolidJS where functions only run once?
From what I understood is that as long as you dont destructure your props, you don't lose reactivity. I'm trying to understand why passing props.onClick would not be OK.
ThanksUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
Amazing!
I planned to open the issue today, and it's already fixed
Thank you very much for the explanation and I'm definitely going to read the docs 😄