title: pass mobx observable data to props
body: <p>Using mobx in react-typescript project. This class set observable array with fetch api:</p>
  
  <pre><code>class MenuRepo {
    @observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}];
    @action getItems(): void {
      fetch(`...`)
        .then((response: { value: IMenuModel[] }): void =&gt; {
          this.menuItems = [
            { Id: 1, itemName: 'test-item1', childItems: [] }
          ];
        });
    }
  </code></pre>
  
  <p>and I want to track this observable data in this component class:</p>
  
  <pre><code>@observer
  class Menu extends React.Component&lt;{params?:IMenuModel[]}, {}&gt; {
    render() {
      debugger
      var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=&gt;{
        return (&lt;li key={item.Id}&gt;{item.itemName}&lt;/li&gt;)
      }):[];
      return (...)
  </code></pre>
  
  <p>but params is "undefined". I watched some tutorials about mobx&amp;react but couldnt solve it.  </p>
  
  <p>and here App.tsx file:</p>
  
  <pre><code>import menuCodes from './components/Codes';
  class App extends React.Component&lt;null, null&gt; {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Menu params = {asd.menuItems}/&gt;
        &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>