Signals not updating in <For> tag

I have code that looks like this:

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);

This creates a random grid of red ang green squares. I want to be able to click any square and have the color flip. With logging, I found that the grid signal is updating, but the colors aren't changing. Am I completely misunderstanding signals here?

27 Replies

REEEEE•2y ago

the array is still the same technically So you can do updateGrid([...val])

gubseyOP•2y ago

? I'll try that That still didn't work

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid([...val])
}

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid([...val])
}

It's definitely changing grid It just isn't reflecting those changes in the render

REEEEE•2y ago

hmm right, but I believe For relies on referential equality of the element. Meaning technically you're updating the same array that was initially pased Here's a quick solution, pass {equals: false} to the second paramter of createSignal createSignal(yourStuff here, {equals: false}) Optionally, use a store instead

Grahf•2y ago

React docs have a section just for updating arrays in state: https://react.dev/learn/updating-arrays-in-state I've used it to update my signals in Solid. It's terrible. Not sure if it will help you or not

gubseyOP•2y ago

this also didn't work I'll look into stores this worked!

Grahf•2y ago

what did you do lol?

gubseyOP•2y ago

changed every <For> to arr.map

Grahf•2y ago

nice

gubseyOP•2y ago

return (
<table>
  <tbody>
    {grid().map((row, y) => (
      <tr>
        {row.map((cell, x) => (
          <td
            class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
            onclick={_ => flip(x, y)}></td>
        ))}
      </tr>
    ))}
  </tbody>
</table>
)

return (
<table>
  <tbody>
    {grid().map((row, y) => (
      <tr>
        {row.map((cell, x) => (
          <td
            class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
            onclick={_ => flip(x, y)}></td>
        ))}
      </tr>
    ))}
  </tbody>
</table>
)

REEEEE•2y ago

However, every update will cause it to rerender the whole grid/list

gubseyOP•2y ago

Yea that's not wrong... but none of the other method's were working...

REEEEE•2y ago

https://playground.solidjs.com/anonymous/22c40c5f-34f4-4809-86e1-72331a237928

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

REEEEE•2y ago

Here you go

gubseyOP•2y ago

Thanks! I appreciate you guys! Any idea why a store works but a signal doesn't? also this syntax is beautiful updateGrid(y, x, p => !p)

REEEEE•2y ago

Here is the signal version

REEEEE•2y ago

https://playground.solidjs.com/anonymous/4118095f-4294-4c48-9490-7c2bc5c9cc1a

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

REEEEE•2y ago

Like I said previously, it has to do with referential equality I believe, I can't seem to remember the specifics though 🤔 But for this kind of thing I would still use a store

gubseyOP•2y ago

oh I see what you did I don't really understand referential equality, but I'm guessing it's similar to the == vs === distinction

REEEEE•2y ago

Well in terms of arrays, [1, 2, 3, 4] after pushing a 5 becomes [1, 2, 3, 4, 5]. While the number of items did change, the underlying array is still the same if you know what I mean. And since that array did not change, the For doesn't update either

gubseyOP•2y ago

right yea Coming from the rust world, these equality rules are still so strange to me

REEEEE•2y ago

That's kind of the general idea, it's been discussed here before but I can't remember at the moment

gubseyOP•2y ago

I miss ownership and borrowing

REEEEE•2y ago

I have yet to dive into that world but I look forward to it

gubseyOP•2y ago

I wish you the best of luck. I've been building my entire backend with axum and I dread ever having to use js. You've made it much easier😅

REEEEE•2y ago

Glad I could help 😄

oneiro•2y ago

Actually values vs. references is a thing in Rust (and probably in all languages), too. When you borrow something you access the same location in memory - the same reference. When you clone something you get a new reference. If you would compare these two by reference they would not be the same thing, as they are different locations in memory. However if you compare them by value / their contents the still could be equal. So the underlying concept is not at all js specific, but fundemantally how allocation and pointers work.

gubseyOP•2y ago

Oh yea I get that. That's the whole point though, in rust you always know when you are access by value or by reference. There is never any ambiguity. It seems like every problem I have with javascript comes from not knowing.

Gaming

Programming

Signals not updating in <For> tag