Lab14(Validation).txt

import React, { useState } from "react";
import { useForm } from "react-hook-form";

function Customer() {
    const [customer, _setCustomer] = useState({ name: "", code: "" });
    const [customers, _setCustomers] = useState([]);
    const { register,trigger, handleSubmit,formState: { errors,isValid  }  } = useForm({mode:'onChange'});
    
    //trigger("name");
   
    React.useEffect(() => {
      (async () => {
        const result = await trigger();
        // const result = await trigger("lastName", { shouldFocus: true }); allowed to focus input
      })();
      console.log("Component loaded");
    }, []); 
    const onFormSubmit  = data =>{ 
                setCustomers();
              };
    const onErrors = errors => console.error(errors);
        const setCustomer = e => {
          _setCustomer(prevState => ({
                ...prevState,
                [e.target.name]: e.target.value
            }));
        };
        
        const setCustomers = e => {
          
          _setCustomers(prevState => (
                [...prevState, customer]
                ));
            _setCustomer(prevState => ({
              ...prevState,
               name: "", code: "" 
          }));
        };
        

  return (
<div className="App">
    <form onSubmit={handleSubmit(onFormSubmit,onErrors)}>
      {errors.name&&errors.name.type}
    {errors.name && <span>Field is required</span>}<br></br>
    {errors.code && <span>code is required</span>}
      Name :- 
         <input
          {...register("name", { required: true })}
          type="text"
           name="name"
        /><br></br>
      
    Code :- 
        <input
          {...register("code", { required:true, pattern: /^[A-Z]{1,3}$/ })}
            type="text" name="code"
        /><br/>
          <input
            value="Add"
            type="submit"
            disabled={!isValid}
        />
        <table>
          <thead>
          <tr>
            <td>name</td>
            <td>code</td>
          </tr>
          </thead>
          <tbody>
        {customers.map((x,index) => (
           <tr key={index}>
            <td>{x.name}</td>
            <td>{x.code}</td>
          </tr>
        ))}
        </tbody>
      </table>
      </form>
    </div>
   
  );
}

export default Customer;