Mobx: Observed array does not display correctly

Question

I am trying to figure out how to use an observable array with Mobx.

It’s hard for me to understand why this is:

let entities = observable([]); entities[0] = "foo"; autorun(() =>{ console.log(entities); }); 

writes:

 [$mobx: Object] 0: (...) 1: (...) 2: (...) 3: (...) 4: (...) 5: (...) 6: (...) 7: (...) 8: (...) 9: (...) 10: (...) 11: (...) 12: (...) 13: (...) 14: (...) 15: (...) 16: (...) 17: (...) ... 999: (...) 

Instead of a classic array?

Answer 1

Find out!

As indicated in the docs

Keep in mind that Array.isArray (observable ([])) will give false, so whenever you need to pass an observable array to an external library, it is recommended to create a shallow copy before passing it to other libraries or built-in functions (which is good practice) using array.slice () or array.peek (). So Array.isArray (observable ([]). Slice ()) will give true.

The doc example shows us todos.filter() , which can be confusing because todos looks like a real JS array. But this is not so.

So, for my work example, I just have to console.log(entities.slice()) , which will display the real JS array.