SHARE
TWEET

Untitled

a guest Jun 20th, 2019 48 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Formik, Form, Field, ErrorMessage } from 'formik';
  2. import * as Yup from 'yup';
  3.  
  4. let accountInfoSchema = Yup.object().shape({
  5.   name: Yup.string()
  6.   .max(20, 'Too Long!')
  7.   .required('Name is Required'),
  8. });
  9.  
  10. class AccountInfo extends Component {
  11.  handleChange = event => {
  12.     this.setState({    
  13.       userAccountData: Object.assign(
  14.         {},
  15.         this.state.userAccountData,
  16.         { [event.target.name]: event.target.value }
  17.       ),
  18.     })
  19.   }
  20.  
  21.  AccountInfoView = () => {
  22.     return (
  23.       <section className="form">
  24.       <React.Fragment>
  25.         <Formik
  26.           initialValues={{name:'' }}
  27.           validationSchema={accountInfoSchema}
  28.           render={() => {
  29.           return(
  30.         <Form onSubmit={this.handleSubmit}>
  31.         {this.Step1()}
  32.         {this.Step2()}
  33.         {this.Step3()}
  34.         <li className="stb_btn half">
  35.           <div className="custom_group">
  36.             {this.previousButton()}
  37.           </div>
  38.         </li>
  39.         <li className="stb_btn half">
  40.           <div className="custom_group">
  41.             {this.nextButton()}
  42.           </div>
  43.         </li>
  44.         </Form>
  45.         );
  46.       }}
  47.       />
  48.       </React.Fragment>
  49.       </div>
  50.     </section>
  51.     )
  52.   }
  53.  
  54. Step1 = () => {
  55. return(
  56. <li>
  57.    <div className="custom_group">
  58.    <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
  59.    <label className="label_two">Name</label>
  60.    <ErrorMessage name="name" />
  61.    </div>
  62.  </li>
  63. )
  64. }
  65.  
  66. render() {    
  67.  
  68.     return (
  69.       <div>{this.AccountInfoView()}</div>
  70.     )
  71.   }
  72.  
  73.  
  74. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top