How to update a useSnapshot() instance

[Ettorebigm]

Hi
i use a useSnapshot's instance to rendere a react component (i.e. inside render() ), pretty much as such:

{stateSnap.groups_tag_filtered.map((group,index) => (
                  <div key={index} className="card card-compact bg-primary ring-2 ring-white">
                   

now, i want to operate some filtering, which means updating the state.group array:

function filter_groups_per_tag () {
    state.groups_tag_filtered = state.groups_tag_filtered.filter(obj => obj.tag === stateSnap.tag)
    console.log("state.groups_tag_filtered: ", state.groups_tag_filtered)
  }

, but when i do the snapshot obtained from useSnapshot doesn't get updated (i understand this to be by design, as useSnapshot stores the "state" object "as is" ).
Is there a way to update in this context the useSnapshot instance ?

[dai-shi]

when i do the snapshot obtained from useSnapshot doesn't get updated

Can you elaborate what is not updated? I think it gets updated by React re-rendering.

[Ettorebigm]

Hi ! Let's assume we have an array of 2 elements, This code here

function filter_groups_per_tag () {
    state.groups_tag_filtered = state.groups_tag_filtered.filter(obj => obj.tag === stateSnap.tag)
    console.log("state.groups_tag_filtered: ", state.groups_tag_filtered)
    console.log("stateSnap.groups_tag_filtered: ", stateSnap.groups_tag_filtered)
  }

filters out 1: the "state" console.logs 1 group, while the "stateSnap" console.logs 2 groups.
So i have:

const state = proxy({tag:''  groups_tag_filtered:[] });
let stateSnap = useSnapshot(state);
function filter_groups_per_tag () {
    state.groups_tag_filtered = state.groups_tag_filtered.filter(obj => obj.tag === stateSnap.tag)
    console.log("state.groups_tag_filtered: ", state.groups_tag_filtered)
    console.log("stateSnap.groups_tag_filtered: ", stateSnap.groups_tag_filtered)
  }

render(
  {stateSnap.groups_tag_filtered.map((group,index) => (
                  <div key={index} className="card card-compact bg-primary ring-2 ring-white">
               // eccc...
)

my goal is to have a button that once clicked filters out a bunch of results out of the array "state.groups_tag_filtered", so that it gets "live-updated" in the render()'s view

[dai-shi]

It should be updated but maybe the .map() usage on the snapshot is tricky.
Would you be able to create a very small example with https://codesandbox.io/s/react-new ?
No styles are needed. Just one single App.js file would be good.

[Ettorebigm]

For the record, i created https://codesandbox.io/s/condescending-moon-6hwg7d?file=/src/App.js which proves that i mismanaged the tricky map in tandem with JSON objects... tricky . Thank you @dai-shi for your valuable perspective