Skip to content

Instantly share code, notes, and snippets.

@Vindexus
Last active Apr 23, 2019
Embed
What would you like to do?
Example
import {Formik} from 'formik'
import React from 'react'
import {Router} from '../routes'
import Layout from '../components/MyLayout.js'
import TextFormGroup from '../components/TextFormGroup'
import FormGroup from '../components/FormGroup'
export default class Register extends React.Component {
state = {
email: '',
username: '',
password: '',
bio: ''
}
onSubmit (data, { setSubmitting, setErrors }) {
console.log('Welcome, ' + data.username + ' from ' + data.email + ' with pw ' + data.password)
setTimeout(() => {
setErrors({
username: 'Username already taken'
})
setSubmitting(false)
}, 250)
}
renderForm (opts) {
const { name } = opts
return (<form onSubmit={opts.handleSubmit}>
{opts.isSubmitting ? <h1>LOAINDG</h1> : ''}
<TextFormGroup name="email" formik={opts} />
<TextFormGroup name="username" label="Your Username" placeholder="Pick a memorable name" formik={opts} />
<FormGroup name="bio" formik={opts}>
<textarea name="bio"
customprop="This needs custom stuff"
onChange={opts.handleChange}
onBlur={opts.handleBlur}
value={opts.values.bio}>
</textarea>
</FormGroup>
<input
type="password"
name="password"
onChange={opts.handleChange}
onBlur={opts.handleBlur}
value={opts.values.password}
/>
{opts.errors.password && opts.touched.password && opts.errors.password}
<button type="submit" disabled={opts.isSubmitting}>
Submit
</button>
</form>)
}
render () {
return (
<Layout>
<div>
<Formik
initialValues={this.state}
onSubmit={this.onSubmit}
>
{this.renderForm}
</Formik>
</div>
</Layout>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment