react_formik_01.jsx

import React from 'react'
import {useFormik} from 'formik'

export default function Register(){
  function validate(values){
    const errors = {}
    if(!values.firstName){
      errors.firstName = "Required"
    }
    if(!values.lastName){
      errors.lastName = "Required"
    }
    return errors;
  }

  const {handleSubmit, handleChange, values, errors} = useFormik({
    initialValues:{
      firstName:"",
      lastName:""
    },
    validate,
    onSubmit(values){
      console.log(values)
    }
  })


  return (
    <form onSubmit={handleSubmit}>
      <input 
      name="firstName"
      onChange={handleChange}
      values={values.firstName}
      />
      {errors.firstName? errors.firstName: null}

      <input 
        name="lastName"
        onChange={handleChange}
        values={values.lastName}
      />
      {errors.firstName? errors.firstName: null}
      <button type="submit" >Submit</button>
    </form>
  )

}

import React from 'react'
import {useFormik} from 'formik'
import * as Yup from "yup"

const validationSchema = Yup.object({
  firstName:Yup.string().required("Required"),
  lastName:Yup.string().required("Required")
})

export default function Register(){
  function validate(values){
    const errors = {}
    if(!values.firstName){
      errors.firstName = "Required"
    }
    if(!values.lastName){
      errors.lastName = "Required"
    }
    return errors;
  }

  const {handleSubmit, handleChange, values, errors} = useFormik({
    initialValues:{
      firstName:"",
      lastName:""
    },
    validationSchema,
    onSubmit(values){
      console.log(values)
    }
  })


  return (
    <form onSubmit={handleSubmit}>
      <input 
      name="firstName"
      onChange={handleChange}
      values={values.firstName}
      />
      {errors.firstName? errors.firstName: null}

      <input 
        name="lastName"
        onChange={handleChange}
        values={values.lastName}
      />
      {errors.firstName? errors.firstName: null}
      <button type="submit" >Submit</button>
    </form>
  )

}

import React from 'react'
import {Formik} from 'formik'
import * as Yup from "yup"

const validationSchema = Yup.object({
  firstName:Yup.string().required("Required"),
  lastName:Yup.string().required("Required")
})

export default function Register(){
  
  return (

    <Formik
    initialValues={{firstName:"", lastName:""}}
    validationSchema={validationSchema}
    onSubmit = {
      values => {
        console.log(values)
      }
    }
    >

      {
        ({handleSubmit, handleChange, values, errors}) => (
          <form onSubmit={handleSubmit}>
            <input type="text"
                  onChange={handleChange}
                  value={values.firstName}
                  name="firstName"
            />
            {errors.firstName}
            <input type="text"
              onChange={handleChange}
              value={values.lastName}
              name="lastName"
            />
            {errors.lastName}
            <button type="submit" >Submit</button>
          </form>
        )
      }

    </Formik>
   
  )

}

import React, { Component } from "react";
import { Formik } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object({
  firstName: Yup.string().required("Required"),
  lastName: Yup.string().required("Required")
});

export default class App extends Component {
  render() {
    return (
      <Formik
        initialValues={{ firstName: "", lastName: "" }}
        validationSchema={validationSchema}
        onSubmit={values => {
          console.log(values);
        }}
      >
        {({ handleSubmit, handleChange, values, errors }) => (
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              onChange={handleChange}
              value={values.firstName}
              name="firstName"
            />
            {errors.firstName}
            <input
              type="text"
              onChange={handleChange}
              value={values.lastName}
              name="lastName"
            />
            {errors.lastName}
            <button type="submit">Submit</button>
          </form>
        )}
      </Formik>
    );
  }
}