MERN Stack New Batch

import React , { useReducer , useState , createContext , useContext } from "react" ; //===============Part 1================= const initStateValue={ Name : "Sabir" , Contact : "033333444" , Roll : "99494" } ; //==============Reducer===Action==List function SetStudentReducer (state , action) { return { Name :action. name , Contact :action. contact , Roll :action.roll } } //===============Use Reducer========= export function TestReducerComponent () { //===================== const [name , setName]= useState ( '' ) ; const [contact , setContact]= useState ( '' ) ; const [roll , setRoll]= useState ( '' ) ; //=========Use Reducer============ const [state , dispatch]= useReducer ( SetStudentReducer , initStateValue) ; function Update () { dispatch({ name :name , contact :contact , roll }) ; } return ...

  import React , { useReducer , useState } from "react" ; const initStateValue={ Name : "Sabir" , Contact : "033333444" , Roll : "99494" } ; //==============Reducer===Action==List function SetStudentReducer (state , action) { return { Name :action. name , Contact :action. contact , Roll :action.roll } } //===============Component========= export function TestReducerComponent () { //===================== const [name , setName]= useState ( '' ) ; const [contact , setContact]= useState ( '' ) ; const [roll , setRoll]= useState ( '' ) ; //=========Use Reducer============ const [state , dispatch]= useReducer ( SetStudentReducer , initStateValue) ; function Update () { dispatch({ name :name , contact :contact , roll }) ; } return <> <input onChange = {(e)=>setName(e. target . val...

import React , { createContext , useState , useReducer } from "react" ; export const initState ={ Name : 'sabir' , Contact : '454334' , Roll : '1110' , Count : 0 } export function Student (state , action) { switch (action. Type ) { case "SetStudent" : return { Name :action. Name , Contact :action. Contact , Roll :action. Roll , } ; case "In" : return { Count :state. Count + 1 } ; case "De" : return { Count :state. Count - 1 } ; } } //==========Context API========= //==========Step1========== export const StudentContext = createContext () ; //=====Step2==== export function StudentDIV ({children}){ const [theme , setTheme]= useState ( 'Light' ) ; const [state , dispatch]= useReducer ( Student , initState ) ; return ( <StudentContext.Provider value = {{...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense] = useState ([]) ; const [filteredExpenses , setFilteredExpenses] = useState ([]) ; const [total , setTotal] = useState ( 0 ) ; useEffect (() => { setFilteredExpenses(expense) ; // Initialize filteredExpenses to match expense updateTotal (expense) ; // Update total when expense changes } , [expense]) ; function updateTotal (filteredList) { const newTotal = filteredList. reduce ((sum , item) => sum + item. Amount , 0 ) ; setTotal(newTotal) ; } return ( <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> <ExpenseList expense = {expense} setExpense = {setExpense} filteredExpenses = {filteredExpenses} setFilteredExpens...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense]= useState ([]) ; const [total , setTotal]= useState ( 0 ) ; return <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> { /*=================*/ } <ExpenseList expense = {expense} setExpense = {setExpense} total = {total} /> </> } //======Form function ExpenseForm ({setExpense , setTotal}) { const [name , setName]= useState ( "" ) ; const [amount , setAmount]= useState ( "" ) ; const [date , setDate]= useState ( null ) ; function Add () { //======== if (name. length != 0 &&amount. length != 0 &&date. length != 0 ){ setExpense(prevExpense => [...prevExpense , { "Name" :name , "Amount" :amount , ...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense]= useState ([]) ; const [total , setTotal]= useState ( 0 ) ; return <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> { /*=================*/ } <ExpenseList expense = {expense} setExpense = {setExpense} total = {total} /> </> } //======Form function ExpenseForm ({setExpense , setTotal}) { const [name , setName]= useState ( "" ) ; const [amount , setAmount]= useState ( "" ) ; const [date , setDate]= useState ( null ) ; function Add () { setExpense(prevExpense => [...prevExpense , { "Name" :name , "Amount" :amount , "Date" :date }]) ; setTotal((p)=>p+ parseInt (amount)) ; setName( "" ) ; ...

  import React , { useCallback } from "react" ; export function ParentCom () { // function TestClick() { // alert('TestClick'); // } const TestClick= useCallback (()=>{ alert ( 'TestClick' ) ; }) ; return <> <h1> Parent </h1> <ChildCom Name = { "Sabir" } onClick = {TestClick} /> </> } export function ChildCom (props) { //{Name,onClick} const {Name , onClick}=props ; return <> <h1> Child </h1> <h1> {Name} </h1> <button onClick = {onClick} > Click Hear </button> </> }