S
SolidJS•3mo ago
wiz

Getting context in click event (TanStack table + SolidUI)

So to get the x out of the way: I have a data table with a few thousand items, and I want to open a dialog (modal) when clicking on a row. Instead of creating one SolidUI Dialog element (with all its content and trigger) per row, I wanted to create a single dialog at the root level and set its open state and content based on the row clicked. So I made my context, wrapped my root in the provider (there's a bit of oddity here because SolidUI doesn't provide wrapping for the underlying kobalte context, but I'm fairly sure I did this correctly if not nicely), and then made an useContext wrapper. Now, if I use this wrapper in a component (Route.tsx line 36) it works fine, dialog pops up, content is in there. However, if I try to useContext in an onclick in a cell (line 25), useContext return null / the wrapper throws an error. Is there something about how tanstack cells are rendered that would leave the context unavailable to it? Am I going about this the wrong way to begin with? I'm new to typescript and these sorts of frameworks so I may be overlooking something. abbreviated code, hopefully it's enough to see what's going on, the rest of the code is still a huge mess. https://gist.github.com/wizjany/390b2fd0a73b346a3a40b0c8128c000d
5 Replies
wiz
wizOP•3mo ago
I'm assuming it has something to do with tanstack rendering the cells on demand (pagination, filtering, and all that). For the same reason I'll probably just fall back to my naive approach of having one dialog component per row. I'm still curious to understand how context works though and why it's getting lost in this particular case.
REEEEE
REEEEE•3mo ago
You can't access context inside an event handler
wiz
wizOP•3mo ago
oh. well that's simple. couldn't find any note of anything like that nor did my googling. thanks. back to the naive approach it is.
REEEEE
REEEEE•3mo ago
Just to clarify, you can't "useContext" inside an event handler. You could access the context in the cell component and pass it to the openDialogFor function instead
wiz
wizOP•3mo ago
hmmm pretty sure i tried that too? lemme see huh wait that worked. idk what i did wrong last time then could have sworn i threw a usecontext call in between every line i could ¯\_(ツ)_/¯ OH i just realized, i did in fact do so, but the docs do warn that HMR breaks context so in the midst of trying things out everywhere, i must have hit that and assumed it didn't work there either (i realize this upon hitting it again 🙃 ) ok nvm it just somehow broke again? tried it on a prod build oh.my.god. 
export function DialogTitle<T extends ValidComponent = "h2">(
    props: PolymorphicProps<T, DialogTitleProps<T>>,
) {
    const context = useDialogContext();
export function DialogTitle<T extends ValidComponent = "h2">(
    props: PolymorphicProps<T, DialogTitleProps<T>>,
) {
    const context = useDialogContext();
found the problem. kobalte's dialog title uses its own (internal) context to generate an id for something or other ok so that was just a series of poorly juxtaposed different errors i ended up conflating. thanks for the tips along the way, helped me split the problem up so i could bisect at what point each different thing broke.

Did you find this page helpful?