Reputation: 182

react + mobx example Attempted import error: 'useObservable' is not exported from 'mobx-react-lite'

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;

Upvotes: 0

Answers (4)

shakti pratap

Reputation: 1

//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;

Upvotes: 0

Elvis020

Reputation: 420

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

Upvotes: 1