0

please suggest the solution. the error which is shown on browser is

Failed to compile ./src/App.js Attempted import error: 'useObservable' is not exported from 'mobx-react-lite'.

import React from 'react';
import './App.css';
import {observer, useObservable} from 'mobx-react-lite';


const App = observer(() => {

const store = useObservable({
    count:1,
addOne(){
  store.count++;
},
subOne(){
  store.count--;
}
})

function addOneHandle(){
store.addOne();
}
function subOneHandle(){
store.subOne();
}

return (
 <div className="App">
  <header className="App-header">
   <h1>Count: {store.count}</h1>
   <button onClick={addOneHandle}>Add 1</button>
   <button onClick={subOneHandle}>Sub 1</button>
  </header>
</div>
 );
 })

 export default App;
Pawan Deore
  • 162
  • 3
  • 10

4 Answers4

1

It's useObserver not useObservable

Ivan V.
  • 7,593
  • 2
  • 36
  • 53
  • If I try UseObserver I get the following error: TypeError: fn is not a function. in src/useObserver.ts:123 with the line: rendering = fn(). In package.json I have "mobx": "^5.15.4", "mobx-react-lite": "^2.0.7", – Chris Hunter-Johnson May 23 '20 at 20:28
1
import { useObserver, useLocalStore } from "mobx-react-lite";

const App = () => {
  // Creating our store
  const store = useLocalStore(() => ({
    count: 1,
    addOne() {
      store.count++;
    },
    removeOne() {
      store.count--;
    },
  }));

  const addOneHandle = () => {
    store.addOne();
  };
  const removeOneHandle = () => {
    store.removeOne();
  };

  return useObserver(() => (
    <div className="App">
      <header className="App-header">
        <h1>State management with MobX</h1>
        <h1>Count: {store.count} </h1>
        <button onClick={addOneHandle}>Add One</button>
        <button onClick={removeOneHandle}>Remove One</button>
      </header>
    </div>
  ));
};

export default App;

You can refer to the official docs... https://mobx-react.js.org/observer-hook

Elvis020
  • 410
  • 3
  • 6
0

import { useObservable } from 'mobx-react-better-use-observable'

user13639950
  • 1
0

//use {useLocalObservable } instead of {useObservable } from "mobx-react-little";
import React from "react";
import "./App.css";
import { observer, useLocalObservable } from "mobx-react-lite";

const App = observer(() => {
  const store = useLocalObservable(() => ({
    count: 1,
    addOne() {
      store.count++;
    },
    subOne() {
      store.count--;
    },
  }));

  function addOneHandle() {
    store.addOne();
  }
  function subOneHandle() {
    store.subOne();
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Count: {store.count}</h1>
        <button onClick={addOneHandle}>Add 1</button>
        <button onClick={subOneHandle}>Sub 1</button>
      </header>
    </div>
  );
});

export default App;
shakti pratap
  • 1
  • 1
  • Please, cold you explain your answer. What do you changed to make it working? – Leo Aug 26 '21 at 11:21
  • The code you posted is *not* a runnable snippet (just click the "Run..." button and you will realize that)! Please edit your answer and format your code as a **plain code block** instead (use simple, three back-tick code fences). – Adrian Mole Aug 26 '21 at 12:34
  • 1
    @Leo i changed {useObservable } to {useLocalObservable } from "mobx-react-little" and {useLocalObservable } take an callBack function . – shakti pratap Aug 28 '21 at 05:54
  • @AdrianMole it will not work here because it is an react app application code (give import error because all module it not available here)you need to create react app using npm then when you replace that code in App.js it will work . – shakti pratap Aug 28 '21 at 05:57