Search code examples
reactjsmobxmobx-react

passing mobx-react-form object as a prop

I'm trying to pass mobx-react-form object as a prop to a function component I created. the problem is when I call my component like that <NameEditor form={ newFolderForm }/> I do get the form argument inside NameEditor component but it doesn't let me 'edit' the field .. its like the field isn't editable, but when I call the component like that { NameEditor({ form: newFolderForm }) } it works perfectly fine, what am I missing ? shouldn't the both ways be the same thing in function components ?

edit: here is how I fetch the form

const NameEditor = ({ form }) => (
 <form onSubmit={ form.onSubmit }>
  <input { ...form.$('name').bind() }/>
  <p>{ form.$('name').error }</p>
  <button>Save</button>
 </form>
)

thanks

Solution

  • make sure you are using observer() on you're function component, from the code you showed there I think you missed this part.

    const NameEditor = observer(({ form }) => (
 <form onSubmit={ form.onSubmit }>
  <input { ...form.$('name').bind() }/>
  <p>{ form.$('name').error }</p>
  <button>Save</button>
 </form>
))

    https://mobx.js.org/refguide/observer-component.html read how it works with Stateless function components