Lectures List
capscom technology computer course almora

Form Handling using formik library

import {Formik, Form, Field} from 'formik';

let Register=()=>{
  return(
      <>
      <h1>Register page</h1>      
      <Formik
      initialValues={{
          name:'',
          gender:'',
          hobby:[],
          school:''
       }}
       onSubmit={async (values)=>{
           window.alert("Submitted");
       } }
      >
          { ({values})=>(
              <Form>  
                  <div>
                      <label htmlFor="name">Name</label>
                      <Field type="text" name="name" />
                    </div>                

                  <div>
                      <label htmlFor="gender">Gender</label>
                      <Field type="radio" name="gender" value="Male" />Male
                      <Field type="radio" name="gender" value="Female" />Female
                    </div>

                    {values.gender}

                  <div>
                      <label htmlFor="hobby">Hobby</label>
                      <Field type="checkbox" name="hobby" value="Reading" />Reading
                      <Field type="checkbox" name="hobby" value="Singing" />Singing
                    </div>

                    {JSON.stringify(values.hobby)}

                  <div>
                      <label htmlFor="school">School</label>
                      <Field name="school" as='select'>
                          <option>GIC</option>
                          <option>AIC</option>
                          <option>VIC</option>
                      </Field>
                    </div>

                    {values.school}                   

                  <div>
                      <button type="submit">Submit</button>
                  </div>
              </Form>
           ) }
      </Formik>
      </>
  )
}

export default Register;
Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।