<For> Component's bug

[ghost]

currently i am learning solid.js with a lot of libraries like rxjs, axios, urql, more...
i have created a counter with createMutable & the structure of the counter is like theses [ { id: 'gjgh4646', value: 1 } ] an array of objects.
there are functions that gets a value with its id & increment, decrement, delete the object in the array.
i used the component to loop over the array & display the value, increment & decrement buttons. but when i click increment & decrement buttons the value updates but the ui dont & when i try it with the map, it works!
why component dont update the ui, although the value of the counter is updating!
note i am using tailwindcss, typescript & nanoid( to get unique id & its string).
what do you suggests for these problem? thanks!

[ryansolid]

I think we'd need to see an example of it not working. It's probably lost reactivity somewhere or misunderstanding how tracking works. map might be blowing out everything and remaking it, hence it "works". Best bet is if you can make a simple reproduction on https://playground.solidjs.com. Might be able to quickly see what the problem is.

[ghost]

import { createSignal, For } from "solid-js";

import { createMutable } from "solid-js/store";

let counts = createMutable({
  value: [{ id: 2, count: 1 }],
  increment(id: number){
    this.value.find(count => count.id === id)!.count += 1;
    console.log(counts.value);
  }
});


function Counter() {
  return (
    <For each={counts.value}>
    {
      ({ id, count }) => (
        <button onclick={() => counts.increment(id)}>{count}</button>
      )
    }
    </For>
  );
}

render(() => <Counter />, document.getElementById("app"));```

[ghost]

import { createSignal, For } from "solid-js";

import { createMutable } from "solid-js/store";

let counts = createMutable({
  value: [{ id: 2, count: 1 }],
  increment(id: number){
    this.value.find(count => count.id === id)!.count += 1;
    console.log(counts.value);
  }
});


function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  return (
    <>
    {
      counts.value.map(({ id, count }) => (
        <button onclick={() => counts.increment(id)}>{count}</button>
      ))
    }
    </>
  );
}

render(() => <Counter />, document.getElementById("app")); ```

[ghost]

sorry, for the code that i have written the code in the playground using my phone & just copy & paste to github!

[ryansolid]

I think it's because you are destructuring and losing reactivity. Callbacks in control flows like <For> are not tracking. map just inefficiently remakes everything every time.

function Counter() {
  return (
    <For each={counts.value}>
    {
      (row) => (
        <button onclick={() => counts.increment(row.id)}>{row.count}</button>
      )
    }
    </For>
  );
}

[atk]

It helps to put your code between ```code```.

[ghost]

thanks! that just works!