Reputation: 24568
I am trying to make observable property by using decorate
from mobx-react
however, I get error:
Uncaught TypeError: Object(...) is not a function
at Object../src/vrp-ui/Button.js (Button.js:32)
at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
at Object../src/map/StudentsMap.js (logo.svg:1)
at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
at Object../src/App.js (App.css?9a66:26)
at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
at Object../src/index.js (index.css?f255:26)
at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
at Object.0 (Button.js:32)
at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
Here is my implementation:
import React, { Component } from 'react'
import {Button} from 'semantic-ui-react'
import axios from 'axios'
import { decorate, observable } from "mobx"
class componentName extends Component {
//@observable vrp_solution = {};
constructor () {
super()
this.state = {
solution: []
}
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
axios.post('http://localhost:8000/vrp/')
.then(response => {
vrp_solution= "!";
console.log(response)})
}
render() {
return (
<Button onClick={this.handleClick}>
Calculate Best Routes!
</Button>
)
}
}
export default decorate(componentName,{vrp_solution: observable });
#Error is here:
export default decorate(componentName,{vrp_solution: observable });
if I remove the decorate
the error goes away..
any idea?
Upvotes: 3
Views: 2173
Reputation: 1636
decorate and observable are from mobx not mobx-react, try,
import { decorate, observable } from "mobx"
also your Button should be
<Button>
Calculate Best Routes!
</Button>
Upvotes: 1