Bug with react-form@1.0.0-beta1

[vladra]

I've tried to update react-form plugin to beta1, but after update, I'm receiving this error:

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory

Uncaught TypeError: Cannot read property '__reactAutoBindPairs' of undefined

Which tracks to this line in React:

// Wire up auto-binding
if (this.__reactAutoBindPairs.length) {
  bindAutoBindMethods(this);
}

# and then here in my Component
(0, _reactForm.Form)()(FormComponentName)

Have you successfully used plugin with React 15.4.2?
Any ideas how to solve this?

UPD:

Last working version for me is 0.11.1
It seems somewhere in this commit?

cdd4bbd

[vladra]

Ah, I've just missed that API is changed and it should be used different way...

[timothyallan]

Ahh, what changed? I'm getting the same error, might be nice to put a solution for others who come here.

[tannerlinsley]

What error are you seeing?

…

On Sat, Jan 28, 2017 at 11:31 AM Tim ***@***.***> wrote: Ahh, what changed? I'm getting the same error, might be nice to put a solution for others who come here. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#30 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCVyegSCPcmbeymbFpwLiSGZXqO3Iks5rW4mSgaJpZM4Ltfqs> .

[timothyallan]

The same one in the OP:
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory
Dynamic page loading failed TypeError: Cannot read property '__reactAutoBindPairs' of undefined

Dying on export default Form({ validate: validateMethods })(RegisterForm);

which was working great previously.

[tannerlinsley]

The new Form export is now a react component instead of a factory. Use it like so:

import { Form } from 'jumpsuit'
export default (
  <Form
    defaultValues={{...}}
    validate={(values) => {...}}
    ...
  >
    {(api) => (
      <div>
        ...your form compoment
      </div>
    )}
  </Form>
)

[timothyallan]

Okay cool, thanks. I was only able to get it going by exporting a function like this:

import { Form } from 'react-form';

export default () =>
  <Form
    validate={validateMethods}
  > ...
)

[tannerlinsley]

Right. That's intended. So basically, you could make your own factory like the old one by doing something like:

export default function FormFactory (props) {
  return (component) => <Form {...props}>{component}</Form>
}

// Usage
const MyForm = FormFactory(defaults)(component)
(
  <MyForm validate={() => {...}} />
)

[timothyallan]

Hrmm, it's late and I'm overlooking something trying to get a Factory going based of that example.
I keep getting expected a string (for built-in components) or a class/function (for composite components) but got: object.. I've tried wrapping the FormFactory export in a function, and while I don't get an error that way, I also don't get any Form content.

FormFactory.js

import React, { PropTypes } from 'react';
import { Form } from 'react-form';

export default function FormFactory(props) {
  return (component) => <Form {...props}>{component}</Form>;
}

RegisterForm.js

class RegisterForm extends Component {
  render() {
    return (
      <form>
        <div className="grid1">
.....

export default FormFactory({
  validate: validateMethods,
  defaultValues: {
    test: true,
  }
})(RegisterForm)

[tannerlinsley]

In that scenario, you would have pass <RegisterForm/> instead of RegisterForm

…

On Sat, Jan 28, 2017 at 10:33 PM Tim ***@***.***> wrote: Hrmm, it's late and I'm overlooking something trying to get a Factory going based of that example. I keep getting expected a string (for built-in components) or a class/function (for composite components) but got: object.. I've tried wrapping the FormFactory export in a function, and while I don't get an error that way, I also don't get any Form content. FormFactory.js import React, { PropTypes } from 'react'; import { Form } from 'react-form'; export default function FormFactory(props) { return (component) => <Form {...props}>{component}</Form>; } RegisterForm.js class RegisterForm extends Component { render() { return ( <form> <div className="grid1"> ..... export default FormFactory({ validate: validateMethods, defaultValues: { test: true, } })(RegisterForm) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#30 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCUPtdrU5k6zlLYT24vBOPd-DsqYEks5rXCS6gaJpZM4Ltfqs> .

[timothyallan]

Yep, that's what I'd thought as well. Doing that still gives React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object..

The component that FormFactory gets ends up being
Object $$typeof:Symbol(react.element) _owner:null _self:null type:RegisterForm() ....

[thg303]

is there any migration guide for this???

[thg303]

migration guide

old versions:

import React from 'react'
import {Form, Text} from 'react-form

// form component
const MyFormComponent = ({submitForm}) => {
	return (
		<form>
			<label>test</label>
			<Text field="name" placeholder="name" />
			<button type='submit'>Submit</button>
		</form>
	)
})

const MyForm = Form({
  validate={({ name }) => {
      return {
        name: !name ? 'A name is required' : undefined
      }
    }}
})(MyFormComponent)

export default MyForm

// usage:
import MyForm from './MyForm'

const FormViewer = () => {
	return (
		<MyForm onSubmit={(values) => console.log('Success!', values)}/>
	)
}

should become like:

import React from 'react'
import { Form, Text } from 'react-form'

const myForm = (
  <Form
    onSubmit={(values) => {
      console.log('Success!', values)
    }}
    validate={({ name }) => {
      return {
        name: !name ? 'A name is required' : undefined
      }
    }}
  >
    {({submitForm}) => {
      return (
        <form onSubmit={submitForm}>
          <Text field='name' />
          <button type='submit'>Submit</button>
        </form>
      )
    }}
  </Form>
)