SolidJS•11mo ago

Resetting state in child component

I have a form that takes default values as a prop. But the default values can change when a different dataset is selected in the parent, in which case I want to reset the form state and provide new default values. In React, you could use key for this, but that doesn't exist in Solid. Is there another solution?

4 Replies

thetarnav•11mo ago

<>{(keySignal(), <ChildComponent/>)}</>

<>{(keySignal(), <ChildComponent/>)}</>

Jakob•11mo ago

Nice, that works! Thank you If you don't mind, can you explain what this actually does?

thetarnav•11mo ago

well first any expression that you put between {} in JSX will be "wrapped in a function" by solid and called in like a memo or other computation. And () is just a weird js syntax where you can have combine multiple expressions, and return only the last one

const x = ("one", "two", console.log("this will run too"), 1 + 2)
x // => 3

const x = ("one", "two", console.log("this will run too"), 1 + 2)
x // => 3

so it's kinda like writing an iife

<>
{(() => {
  someSignal()
  return <ChildComponent/>
})()}
</>

<>
{(() => {
  someSignal()
  return <ChildComponent/>
})()}
</>

andi•11mo ago

fyi there's also a component in solid-primitives that does this if you want a "cleaner-looking" solution

import { Rerun } from '@solid-primitives/keyed';

<Rerun on={signal}>
  <ChildComponent/>
</Rerun>

import { Rerun } from '@solid-primitives/keyed';

<Rerun on={signal}>
  <ChildComponent/>
</Rerun>

Gaming

Programming

Resetting state in child component