Jazib Jazib - 27 days ago 13
React JSX Question

reactjs mobx without decorators not working

I am trying to incorporate

mobx
with
react
. Since I spawned my application using
create-react-app
, I can't use decorators given by mobx.

Given that we can use mobx without decorators as per this documentation: https://mobxjs.github.io/mobx/best/decorators.html

Here's a component that I created:

import React, { Component } from 'react';
import observer from 'mobx-react';

export const TestComponent = observer(class TestComponent extends Component {

render() {
return <div>Just a test component!</div>
}

});


Here's a simple calling of the above component:

import React, { Component } from 'react';

import './App.css';

import Auth from './Auth'
import { TestComponent } from './Test'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import AppBar from 'material-ui/AppBar';
import authStore from './stores/Store'

class App extends Component {

constructor(props) {
super(props);
this.state = {
}
}

render() {
return (
<div className="app">
<MuiThemeProvider>
<div>
<TestComponent store={authStore} />
</div>
</MuiThemeProvider>
</div>

);
}
}

export default App;


Now when I run the above component, I get error:
Uncaught TypeError: (0 , _mobxReact2.default) is not a function(…)
nothing get displays in console.

What am I doing wrong here?

Answer

Please use import {observer} from 'mobx-react';

N.B. note that decorators can be used with create-react-app by using custom-react-scripts, as explained here)

Comments