pass mobx observable data to props

Question

Using mobx in react-typescript project. This class set observable array with fetch api:

class MenuRepo {
  @observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}];
  @action getItems(): void {
    fetch(`...`)
      .then((response: { value: IMenuModel[] }): void => {
        this.menuItems = [
          { Id: 1, itemName: 'test-item1', childItems: [] }
        ];
      });
  }

and I want to track this observable data in this component class:

@observer
class Menu extends React.Component<{params?:IMenuModel[]}, {}> {
  render() {
    debugger
    var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{
      return (<li key={item.Id}>{item.itemName}</li>)
    }):[];
    return (...)

but params is "undefined". I watched some tutorials about mobx&react but couldnt solve it.

and here App.tsx file:

import menuCodes from './components/Codes';
class App extends React.Component<null, null> {
  render() {
    return (
      <div className="App">
        <Menu params = {asd.menuItems}/>
      </div>
    );
  }
}
export default App;

mweststrate mweststrate · Accepted Answer · 2017-03-13T09:47:14

is asd instanceof MenuRepo? Note that in the first render menuItems will be undefined, as it only get's it's first value after the fetch has resolved, which should produce the second rendering.

Note that App should be observer as that is the one dereferencing the menuItems observable. (For more info: https://mobx.js.org/best/react.html)

pass mobx observable data to props

1 Answers