Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Formik, Form, Field, ErrorMessage } from 'formik';
- import * as Yup from 'yup';
- let accountInfoSchema = Yup.object().shape({
- name: Yup.string()
- .max(20, 'Too Long!')
- .required('Name is Required'),
- });
- class AccountInfo extends Component {
- handleChange = event => {
- this.setState({
- userAccountData: Object.assign(
- {},
- this.state.userAccountData,
- { [event.target.name]: event.target.value }
- ),
- })
- }
- AccountInfoView = () => {
- return (
- <section className="form">
- <React.Fragment>
- <Formik
- initialValues={{name:'' }}
- validationSchema={accountInfoSchema}
- render={() => {
- return(
- <Form onSubmit={this.handleSubmit}>
- {this.Step1()}
- {this.Step2()}
- {this.Step3()}
- <li className="stb_btn half">
- <div className="custom_group">
- {this.previousButton()}
- </div>
- </li>
- <li className="stb_btn half">
- <div className="custom_group">
- {this.nextButton()}
- </div>
- </li>
- </Form>
- );
- }}
- />
- </React.Fragment>
- </div>
- </section>
- )
- }
- Step1 = () => {
- return(
- <li>
- <div className="custom_group">
- <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
- <label className="label_two">Name</label>
- <ErrorMessage name="name" />
- </div>
- </li>
- )
- }
- render() {
- return (
- <div>{this.AccountInfoView()}</div>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement