Switin Kotian

REACT- MUI - Dialog Box - Sample for confirmation of Delete Record.  Sample code also  demonstrate how to send value from child component to parent component  // This method will be triggered on response from dialog box const ConfirmBoxHandleResponse = (ResponseValue) => {     if (ResponseValue === true) {       DeleteData();     }   };   // State variable to handle visibility of Dialog box   const [ShowConfirmationValue, SetShowConfirmationValue] =  useState(false); const ShowConfirmation = () => {      SetShowConfirmationValue(true);   };   // Button to trigger dialog box – for delete   <Button                 variant="outlined"                 startIcon={<DeleteIcon />}  ...

          REACT-SELECT - Set Value from WEB-API and Update on selection. import Select from "react-select"; let [CountryList, SetCountryList] = useState([]); // This will store the current selected value : same is required to assign the value to react-select on runtime selection. If same is not done selected value will not get updated  // Properties [id and countryName] name and case has to match with the data field which is  // comming from JSON. [GetCountryList] let [CountrySelected ,setCountrySelected] = useState({id:0, countryName:""}); let [StateMasterData, SetStateMasterData] = useState({     id: 0,     stateName: "",     countryID: 0,     countryName:"",   });  //Fetch API   useEffect(() => {     GetCountryList();     if (location.state.ID !== 0) {       GetData(location.state.ID);     }   }, [location.state.ID]); // Get Data from web -API...

  Arrow Function Syntax for using Arrow Function // Normal Function function Add(a,b) {    return a +b } / /Arrow Function let AddWithAF = (a,b) =>{     return a +b } OR let AddWithAFInLine = (a,b) => a + b // Normal Function function IsPositive (number) { return number >= 0 } //Arrow Function let isPositiveWithAF (number) => return number >= 0 OR let isPositiveWithAFInLine number => return number >= 0 // Normal Function function GenerateRandomNumber () { return math.random } //Arrow Function GenerateRandomNumberWithArrowFunc () =>  return math.random

Sending Props to component in below sample we are sending Object as Props to child component it also has sample code for destructing of variable  // PARENT import React from "react" import ObjectASPropsInFunc from './ObjectAsPropsInFunc' function ObjectAsPropsMain() {     const persons    =[         {Name:"Switin", Email:"sk@test.co.in",              Contact :[{Phone:1234},{Phone:654},{Phone:987987}]         },         {Name:"Sam", Email:"sam@test.in",              Contact : [{Phone:546546},{Phone:6498797},{Phone:798797}]         }     ]     return(         <div>             <h3>This is Object to Component</h3>             <p>                 for working...

Controlled component and uncontrolled component Controlled Component : when an input control is managed by state is called Controlled component uncontroller component : when an input control is direct managed by java script or jquery i.e reading value of control using getelementbyid. // Controlled Component SAMPLE import React,{useState} from "react"; function ControlledComponentUsage() {         let [StateForInput,setStateForInput]  = useState('');         return(             <div>                 <input type="text" onChange={(e) => setStateForInput(e.target.value)} ></input>                 <p>                     value in Input Box : - {StateForInput}                 </p>           ...