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 functi...

 HERE, WE TRY TO DISPLAY ALL THE COMPONENTS. ONCE A FORM IS SUBMITTED, IT SHOULD BE DISPLAYED. TO DO THIS, WE SHOULD FOLLOW REACT HIERARCHY SO THAT A COMPONENT CAN BE IMPORTED. BUT HERE, IF WE TRY TO IMPORT COMMENT FORM'S FUNCTION FORM COMMENTFORM COMPONENT, ONLY THE MOST RECENT COMMENT IS DISPLAYED. SO,WE IMPORT FUNCTION FROM COMMENTS INTO COMMENTFORM. COMMENTS.JSX import { useState } from "react" ; import "./Comments.css" ; import CommentForm from "./CommentsForm" ; export default function Comments () {   let [ comments , setComments ] = useState ([     {       username : "@abhi" ,       remarks : "nice work" ,       rating : "4" ,     },   ]);   let addComment = ( comment ) => {     setComments (( currComments ) => [ ... currComments , comment ]);     };   return (     <>       < div >        ...

 WE CREATE A COMMENTS FORM,  import { useState } from "react" ; export default function CommentForm () {   let [ commentForm , setCommentForm ] = useState ({     username : "" ,     remarks : "" ,     rating : "" ,   });   let handleInputChange = ( event ) => {     setCommentForm (( currData ) => {       return { ... currData , [ event .target.name]: event . target . value };     });   };   let handleSubmit = ( event ) => {     event . preventDefault ();     console . log ( commentForm );     setCommentForm ({       username : "" ,       remarks : "" ,       rating : 5 ,     });   };   return (     < form onSubmit = { handleSubmit } >       < h2 > Comments!! </ h2 >       < label htmlFor = "usernam...

A FORM MAY CONSIST OF MULTIPLE INPUT TAGS, WRITING STATEVARIABLES,FUNCTIONS FOR EVERY INPUT TAG BECOMES DIFFICULT. HENCE , WE CREATE A COMMON HANDLER FOR ALL INPUTS. COMMON HANDLER REFERS TO A SINGLE FUNCTION THAT GETS INVOKED ON EVERY "onChange" OF INPUT TAG. AS THE EVENT OBJECT CONSISTS TARGET VALUE CAN BE USED TO TRACK CHANGES AND CONTROL. INSTEAD OF DECLARING MULTIPLE STATE VARIABLES, WE CAN DECLARE AN OBJECT THAT CONSIST OF ALL STATE VARIABLES RELATED TO FORMS.   let [ formData , setFormData ] = useState ({     name : "" ,     username : "" ,   }); HERE, IN ORDER  TO TRACK CHANGES, WE USE event.target.name and event.target.value    WE NEED TO FIND THE FIELD NAME FROM FORMDATA AND ASSIGN NEW VALUE TO IT. AS WE ARE DEALING WITH OBJECTS, WE NEED TO MAKE A COPY AND DECONSTRUCT IT TO MAKE CHANGES IN THE STATE VARIABLE. INSTEAD OF USING {...OBJ} , WE USE [ VARIABLE ] WRITING A VARIABLE INSIDE SQUARE BRACKETS MEANS IT'S A COMPUTED PROPER...

 IN JSX, FOR LABELS WE DONOT USE for AS IT IS A RESERVED  KEYWORD ( for loop ). INSTEAD WE USE htmlFor.     < form >         < label htmlFor = "name" > Name: </ label >       < input placeholder = "enter name" value = { name } onChange = { getChange } id = "name" type = "text" />       < button > submit </ button >     </ form >   );    BUT IN THE DOM , IT WILL BE DISPLAYED AS for.

 IN HTML, THE FORM ELEMENTS  SUCH AS <input>,<button>,<textarea>....etc MAINTAIN THEIR OWN STATE ( INTERNAL STATE) AND UPDATE IT BASED ON THIER UESR INPUT. INTERNAL STATE HERE DOESNOT REFER TO REACT STATE, IT MEANS THAT THESE ELEMENTS HAVE SOME INTERNAL INFORMATION AND DEFAULT BEHAVIOURS LIKE AS SOON AS A FORM IS SUBMITTED ALL THE INFORMATION DISAPPERS EVEN IF WE WANT TO TRACK THE EVENT ( ONCHANGE, ONCLICK) ON THAT FORM. HERE, WE WANT THE FORM TO WORK ON REACT STATE AND NOT ON THEIR INTERNAL STATE, WE MAKE REACT AS THE SINGLE SOURCE OF TRUTH . THE STANDARD WAY WITH FORMS IS TO USE " CONTROLLED COMPONENTS" , SO THAT WE MAKE REACT STATE TO BE THE SINGLE SOURCE OF TRUTH. WHICH MEANS THAT,WE ASSIGN A  STATE WITH EACH <form> THAT INFORMS AND HELPS TO TRACK CHANGES INSIDE THAT FORM. AN INPUT FORM ELEMENT WHERE VALUE IS CONTROLLED BY REACT IN THE WAY IS CALLED A CONTROLLED COMPONENT . FORM.JSX import { useState } from "react" ; export d...

 TILL NOW, WE SENT VARIABLES, ARRAYS, OBJECTS AS PROPS. FUCNTIONS CAN BE ALSO BE SENT AS PROPS. IN JS FUNCTIONS CAN BE PASSED TO A FUNCTION AS ARGUMENT, RETURNED FROM IT AND ASSIGNED TO A VARIABLE. IN OTHER LANGUAGES LIKE HTML,CSS,..ETC WHEN WE CHANGE SOME PART OF CODE, ENTIRE PAGE GETS RE-RENDERED.BUT IN REACT, ONLY THE CHANGED PART GETS RE-RENDERED. HERE, IN THE LOTTERY GAME , WE CREATE A FUNCTION WINNING CONDITION AND SEND IT AS A PROP. THIS FUNCTION DEFINES THE WINNING CONDITION. APP.JSX function App () {   let winningCondition = ( ticket ) => {     return ticket [ 0 ] === 0 ;   };   return (     <>       < Lottery n = { 4 } winningCondition = { winningCondition } /> LOTTERY.JSX export default function Lottery ({ n = 3 , winningCondition }) {   let [ ticket , setTicket ] = useState ( genTicket ( n ));   let isWinning = winningCondition ( ticket );   let buyTicket = () => { ...