FORM VALIDATIONS (REACT)

 IN REACT, WE USE FORMIK FOR FORM VALIDATION.

TO INSTALL : npm i formik

TO USE : import {useFormik} from formik;

WE COPY CODE FROM DOC.

FORMIK ALREADY HAS HANDLECHANGE AND HANDLE SUBMIT FUNCTIONS SO COMMENT THEM FROM OUR CODE.

IT ALSO HAS VALUE, ONCHANGE, ONSUBMIT VALUES WE COPY THEM.

COMMENTSFORM.JSX

import { useState } from "react";
import { useFormik } from "formik";

const validate = (values) => {
  const errors = {};
  if (!values.username) {
    errors.username = "Username cannot be empty";
  } else if (values.username.length > 15) {
    errors.username = "Must be 15 characters or less";
  }

  if (!values.remarks) {
    errors.remarks = "remarks cannot be empty";
  } else if (values.remarks.length > 15) {
    errors.remarks = "Must be 15 characters or less";
  }
   
  return errors;
};

export default function CommentForm({ addComment }) {
  //   let [commentForm, setCommentForm] = useState({
  //     username: "",
  //     remarks: "",
  //     rating: "",
  //   });

  const formik = useFormik({
    initialValues: {
      username: "",
      remarks: "",
      rating: "",
    },
    validate,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  //   let handleInputChange = (event) => {
  //     setCommentForm((currData) => {
  //       return { ...currData, [event.target.name]: event.target.value };
  //     });
  //   };
  //   let handleSubmit = (event) => {
  //     event.preventDefault();
  //     console.log(commentForm);
  //     addComment(commentForm);
  //     setCommentForm({
  //       username: "",
  //       remarks: "",
  //       rating: 5,
  //     });
  //   };
  return (
    <form onSubmit={formik.handleSubmit}>
      <h2>Comment Form</h2>
      <label htmlFor="username">Username:&nbsp;</label>
      <input
        placeholder="Enter username"
        type="text"
        value={formik.values.username}
        id="username"
        onChange={formik.handleChange}
        name="username"
      />
      {formik.errors.username ? <p style={{color:"red"}}>{formik.errors.username}</p> : null}
      <br />
      <br />

      <label htmlFor="remarks">Remarks:&nbsp;</label>
      <input
        placeholder="Write remarks"
        type="text"
        value={formik.values.remarks}
        id="remarks"
        onChange={formik.handleChange}
        name="remarks"
      />      {formik.errors.remarks ? <p style={{color:"red"}}>{formik.errors.remarks}</p> : null}

      <br />
      <br />

      <label htmlFor="rating">Rating:&nbsp;</label>
      <input
        type="number"
        value={formik.values.rating}
        id="rating"
        onChange={formik.handleChange}
        name="rating"
        min={1}
        max={5}
/>
      <br />

      <button>submit</button>
    </form>
  );
}






Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more