CODEWITHSUNDEEP
reactjsmobx
matthewdaniel
matthewdaniel

Reputation: 1960

Why isn't this react component updating with mobx observer

I'm trying to use the ObservableMap (also tried observable.map). I would expect the following minimal component setup to update when i add an item to my devices. Am I doing something incorrectly or misunderstanding mobx? Both console.logs will output {next: ƒ, Symbol(Symbol.iterator): ƒ} and doesn't show any data for my map.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observer, Provider } from 'mobx-react';
import { ObservableMap, observable } from 'mobx';
declare var Map;

const App = observer(
    ['devices', 'store'],
    ({devices, store}) => {

        console.log(store.devices.entries());

        return <div>
            {[...devices.entries()].map(([id, device]) => <div>test</div>)}
            {/* {devices.entries().map(([id, device]) => <div key={device.id}>{device.name}</div>)} */}
            test3
        </div>
})

var test = observable({
    devices: new Map([['a', 'one']])
});

setTimeout(() => test.devices.set('b', "two"), 200);

ReactDOM.render(<Provider store={test} devices={test.devices}><App /></Provider>, document.getElementById('app'));

Upvotes: 1

Views: 493

Answers (1)

Doron Brikman
Doron Brikman

Reputation: 2584

I didn't move to version 4 and above yet. But what I understand is that ObservableMap doesn't exist anymore and you should use observable.map. And in your case that make the entire object observable you can just use es6 native Map:

var test = observable({ devices: new Map([['a', 'one']]) });

And now that you have just a Map enteries is an iterator so you can use spread operator or Array.from to use array map function:

<div>
  {Array.from(devices.entries()).map(([id, device]) => (
    <div key={id}>{device}</div>
  ))}
  test3
</div>

Upvotes: 1

Related Questions