title: How to inject mobx store into a stateless component
body: <p>I am using <code>mobx</code> and <code>react</code> in a web application and I want to find a way to pass <code>mobx</code> store state to a stateless component. Below is my current component source code:</p>
  
  <pre><code>import React from 'react';
  import Panel from './Panel';
  import {inject, observer} from 'mobx-react';
  
  @inject(allStores =&gt; ({
    form: allStores.store.form,
  }))
  @observer
  export default class Creator extends React.Component {
  
    connect() {
      console.log(this.props.form);
    };
  
    render() {
      return (
        &lt;Panel form={this.props.form} connect={this.connect.bind(this)}/&gt;
      );
    }
  };
  </code></pre>
  
  <p>How can I change it to be stateless? I tried below code but didn't work:</p>
  
  <pre><code>const Creator = ({form}) =&gt; {
  
    const connect = ()=&gt;{
      console.log('xxxx,', form);
    }
  
    return (
      &lt;Panel form={form} connect={connect}/&gt;
    );
  }
  
  export default observer(Creator);
  </code></pre>
  
  <p>when I run above code, I got <code>undefined</code> value for <code>form</code> on the <code>connect</code> method. How can I inject the store into stateless component? I tried to use <code>@inject</code> on top of stateless component, but got a syntax error.</p>