Sometip Sometip - 1 year ago 78
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?

Answer Source

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

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