Mobx: emotions

[acopalipsis]

What should I do to get this code to work?

class ClockStore {
    @observable data = [
        {id: "hour", value: "00"},
        {id: "min", value: "00"},
        {id: "second", value: "00"},
    ];

    @action
    update(id, value){
        this.data.find(item => item.id === id).value = value;
    }
}

let clockStore = new ClockStore();



@inject('clockStore')
@observer
class App extends Component<any, any> {
    render(){
        return <Clock data={this.props.clockStore.data}></Clock>
    }
}

// it's not my clock this component is taken from github
class Clock extends Component<any, any> {
    render(){
        return (
            <div>
                <ClockFace data={this.props.data} />
                <div className="clock-control"></div>
            </div>
        )
    }
}

class ClockFace extends Component<any, any> {
    render(){
        return (
            <div className="clock-face">
                {this.props.data.map( ( item, index ) => <ClockSection key={ index }>{ item.value }</ClockSection> )}
            </div>
        )
    }
}
class ClockSection extends Component<any, any> {
    render(){
        return (
            <span className="clock-section">{ this.props.children }</span>
        )
    }
}

let stores = { clockStore };

ReactDOM.render(
    <Provider {...stores}>
        <App />
    </Provider>,
    document.querySelector( 'main' )
);

// the code that sets the clock
let count = 0;
document.addEventListener( 'click', () => clockStore.update( 'hour', count ++ ) );
// --------------------------

[urugator]

I think mobx.toJS could do the trick:

// in App.render
return <Clock data={mobx.toJS(this.props.clockStore.data)}></Clock>