CODEWITHSUNDEEP
solid-js
Dan
Dan

Reputation: 864

Re-order array items stored in a signal in Solid-js

Going through the SolidJS tutorial and playing around with the code. I'm at https://www.solidjs.com/tutorial/flow_for?solved.

Updated code below: Why doesn't clicking the button update the DOM order?

import { render } from 'solid-js/web';
import { createSignal, For } from 'solid-js';

function App() {
  const [cats, setCats] = createSignal([
    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
    { id: 'z_AbfPXTKms', name: 'Maru' },
    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
  ]);

  const rearrange = () => {
    const curCats = cats();
    setCats([curCats[1],curCats[2],curCats[0]]);
    console.log(cats().map(cat => cat.name));
  };
  
  return (
    <>
      <ul>
        <For each={cats()}>{(cat, i) =>
          <li>
            <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
              {i() + 1}: {cat.name}
            </a>
          </li>
        }</For>
      </ul>
      <button onClick={rearrange}>Rearrange</button>
    </>
  );
}

render(() => <App />, document.getElementById('app'))

Upvotes: 0

Views: 1320

Answers (1)

snnsnn
snnsnn

Reputation: 13698

Your example works as expected, check out the link:

https://playground.solidjs.com/?hash=454601752&version=1.4.1

Upvotes: 1

Related Questions