Sometip Sometip - 3 months ago 33
React JSX Question

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

I have been playing around with MobX + React + 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:

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?


Your react components where not marked as observer. See for an updated fiddle. For example:

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