How to inject mobx store into a stateless component : <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>
