S
SolidJS•16mo ago
James

React key prop substitute!

I know what you're thinking, James, you silly sausage - Solid.js doesn't require keys for loops, and you're absolutely right but... I need key={} for another reason, I need to cause a component to be entirely unmounted and remounted, which was easily viable in React by just updating its key value in its parent. Any ideas how I can do that in Solid.js? Cheers, James
4 Replies
thetarnav
thetarnav•16mo ago
<>{(signal() , <Component />)}</>
James
JamesOP•16mo ago
it's not that I need to be able to toggle a component on/off - I need it to, on a single update be totally replaced by a new instance I can achieve that using a signal along the lines of: 
const [shouldMount, setShouldMount] = useSignal(false);

function remount() {
  setShouldMount(false);
  setTimeout(() => {
    setShouldMount(true);
  });
}

return signal() && (
  <Component />
);
const [shouldMount, setShouldMount] = useSignal(false);

function remount() {
  setShouldMount(false);
  setTimeout(() => {
    setShouldMount(true);
  });
}

return signal() && (
  <Component />
);
but that causes the DOM to be totally removed for a split second whereas in React you can use key={whateverPrimitiveYouWant} to re-render a component, the reason I'm trying to do this is to recreate a bunch of components in my root.tsx (solid-start) for a page on router change - but I think I'll use a layout function and put that in each of the pages instead
thetarnav
thetarnav•16mo ago
it's literally this it will rerun the component whenever the signal changes instantly you just need a signal to trigger a simple counter will do, or one with { equals: false } you also can use <Show keyed/> or <Rerun/> from solid-primitives for a similar effect
James
JamesOP•16mo ago
oh right! strange syntax but I guess it makes sense, thank you!

Did you find this page helpful?