Pushing in array state

[vrcxz]

This might sound dumb but I have this simple list of divs:

const list = van.state(['a','b','c']);

const dom = () => {
    return div(list.val.map(x=>div(x)))
};

Then when I try push an element to the list:

const change = button({
   onclick:()=>{
      list.val.push('x');
   }
}, 'click');

It doesn't update the list in the dom. I tried experimenting a bit and then found this:

const change = button({
   onclick:()=>{
      list.val.push('x');
      list.val = [...list.val];
   }
}, 'click');

It works fine now. This does the same when I set the values individually in the array. But is there another way of updating an array state without making a copy/changing the reference to another array object? Thank you for your awesome work!

[Tao-VanJS]

See the relevant discussion in this thread: #207 (reply in thread).

For the UI to be reactive to push of Arrays, you can consider using vanX.list (part of VanX, the official VanJS extension).

[vrcxz]

Thank you very much for your answer!

Can I ask something else?

Why is the list not changing to 'b' (initial state) after I switched it to 'a', despite calling the replace function multiple times?

const a = [1,2,3]
const b = [4,5,6]
const list = vanX.reactive(b)

const change = button(
   {onclick:()=>{
      if(list[0]==a[0]) {
         console.log('switched to b')
         vanX.replace(list,x=>b);
      }
      else{
         console.log('switched to a')
         vanX.replace(list,x=>a);
      }
   }},'Change'
);
  
const dom = vanX.list(div,list,v=>div(v))
van.add(document.body,dom,change)

But when I try to set the initial state of the reactive list to an empty array, it works just fine?

const a = [1,2,3]
const b = [4,5,6]
const list = vanX.reactive([])

const change = button(
   {onclick:()=>{
      if(list[0]==a[0]) {
         console.log('switched to b')
         vanX.replace(list,x=>b);
      }
      else{
         console.log('switched to a')
         vanX.replace(list,x=>a);
      }
   }},'Change'
);
  
const dom = vanX.list(div,list,v=>div(v))
van.add(document.body,dom,change)

[Tao-VanJS]

See https://vanjs.org/x#caveat-no-reuse-reactive for the caveat.