Comments (12)
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}
> ...
)
from form.
Ah, I've just missed that API is changed and it should be used different way...
from form.
Ahh, what changed? I'm getting the same error, might be nice to put a solution for others who come here.
from form.
from form.
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.
from form.
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>
)
from form.
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={() => {...}} />
)
from form.
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)
from form.
from form.
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() ....
from form.
is there any migration guide for this???
from form.
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>
)
from form.
Related Issues (20)
- [Tracking] Refactors prior to 1.x
- Array fields do not run onChange validation HOT 2
- Doubly nested array subfield infers `never` for value type HOT 8
- Mismatch in array handling between useForm and FormData HOT 3
- Error using useState & form.setFieldValue HOT 7
- Add a way to display only one error for a field HOT 3
- Calling `createFormFactory<FormData>` and using a validator adapter throw TS errors HOT 1
- onChangeAsyncDebounceMs not properly debouncing HOT 1
- TanStack/Angular - Error when resetting the form HOT 1
- Missing error when validating via form options instead of via field HOT 3
- Factory `onSubmit` function not invoked whenever factory.useForm gets provided with `onSubmit` itself HOT 2
- Unable to read properties in nested array table HOT 2
- Nested Values Disappear when using StrictMode HOT 5
- onMount Error is not revalidated when the user changes the input HOT 2
- server actions example errors when using zod adapter HOT 1
- Cannot infer types on arrays of union of objects HOT 1
- Moving subfields of array field mix their values HOT 1
- Bad performance with 100+ rows in an array field HOT 4
- insertFieldValue replaces item instead of adding a new one and shift existing items
- solid form createField failed to import `memo` from "solid-js/web" when used in solid-start ssr mode
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from form.