SolidJS•9mo ago

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•9mo ago

<>{(signal() , <Component />)}</>

jimmyjamiejamesjimbob•9mo 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•9mo 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

jimmyjamiejamesjimbob•9mo ago

oh right! strange syntax but I guess it makes sense, thank you!

Gaming

Programming

React key prop substitute!