MobX + React - Getting observable to re-render within an external component

Question

I have been playing around with MobX + React + React Sortable Hoc ( https://github.com/clauderic/react-sortable-hoc )

And I am unable to add a new item to the sortable list dynamically and make it appear straight away. If you click on the "Add another one" button a few times to push new items to the list, and then re-order an item in the list, only then does the list get updated to show all the items:

https://jsfiddle.net/56s57ryb/

Using this as the store:

let appState = mobx.observable({
    todos: [ 'yellow', 'blue', 'red' ]
})

appState.addTodo = function() {
    appState.todos.push( 'new one' )
}

I've been going around in circles for ages and searched the internet up and down but I can't seem to pinpoint where I'm going wrong. Does anyone know what is going on?

Answer 1

Your react components where not marked as observer. See https://jsfiddle.net/56s57ryb/1/ for an updated fiddle. For example:

const SortableItem = SortableElement(mobxReact.observer(({value}) => <li className="SortableItem">{value}</li>));