Forem: Radheshyam Gupta

Create Your own Popup Message Box Or toastify In React and avoid Security Bridge.

Radheshyam Gupta — Wed, 01 May 2024 06:20:39 +0000

In React Or Any JavaScript Web Application,We need to show message to user for information and for that we use third part packages for this.We don't know what we install with that packages and also we increase this size of our web application.And,it is big challenging job to Secure your web application from unauthorised persons.
For all above ,to avoid worry we should avoid using third party packages.
Today I just show to you with small program to fulfilled this challenging job in very easy way.

Now times to show Code;

First we need to Create a new folder "component" inside "src" folder. In component folder we create three new folder name like "Icons,popup,toastify".

In "Icons" folder we create Icons.js file which store Icons related small component which mix with svg file.
In "Icons" folder we create Icons.js file which store Icons related small component which mix with svg file.

Icons.js Code are Below

import React from 'react';


export const ShoppingCart = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" >
            <path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" />
        </svg >

        );
};

export const CheckCircle = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`}  xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};
export const Warning = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
        </svg>

        );
};
export const Error = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};

export const SpinnerIcon = (props) => {
    const { ClassNm, IconColor, IconSize } = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m482-200 114-113-114-113-42 42 43 43q-28 1-54.5-9T381-381q-20-20-30.5-46T340-479q0-17 4.5-34t12.5-33l-44-44q-17 25-25 53t-8 57q0 38 15 75t44 66q29 29 65 43.5t74 15.5l-38 38 42 42Zm165-170q17-25 25-53t8-57q0-38-14.5-75.5T622-622q-29-29-65.5-43T482-679l38-39-42-42-114 113 114 113 42-42-44-44q27 0 55 10.5t48 30.5q20 20 30.5 46t10.5 52q0 17-4.5 34T603-414l44 44ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

    );
};

In "popup" folder we have PopupBox.css and PopupBox.jsx file.

PopupBox.css and PopupBox.jsx Code are Below

/*PopupBox.css*/

.PopupBoxModal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}
.PopupBody {
    width: 26%;
    min-width: 233px;
    height: 32%;
    min-height: 300px;
    border: 1px solid #888;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 11px;
    background-color: #fefefe;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.PopupHeader {
    width: 100%;
    height: 50px;
    display: flex;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
.PopupHeaderText {
    width: 32%;
    min-width: 129px;
    height: 50px;   
    border-top-left-radius: 11px;
}
.PopupHeaderTxt {
    font-size: medium;
    font-family: cursive;
    font-weight: 300;
    padding: 1px 13px
}
.PopupHeaderIcon {
    width: 10%;
    height: 50px;

}
.PopupHeaderBtn {
    width: 58%;
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    border-top-right-radius: 11px;
}

.PopupBtn {
    background: none;
    border: none;
    /* margin-left: 88px; */
    margin-top: -16px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}
.PopupBtn:hover {
    cursor:pointer;
    color:white;
}
.PopupMessageBody {
    height: 62%;
    min-height: 186px;
    overflow-y:auto;
}
.PopupFooter {
    display: flex;
    flex-direction: column;
}
/* OK Button */
.okBtn {
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    align-self: center;
    margin-top: 10px;
}

.okBtn:hover {
  background-color: #45a049;
}

.IconSpin {
    position: absolute;
    margin-top: 9px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}
@media (prefers-reduced-motion: no-preference) {
    .IconSpin {
        animation: HeaderIconSpin infinite 2s linear;
    }
}
@keyframes HeaderIconSpin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/*PopupBox.jsx*/

import { CheckCircle, Warning, Error, SpinnerIcon } from '../Icons/Icons';
import './PopupBox.css';


const PopupBox = (props) => {

    const { Message, RedirectUrl, IsSuccess, IsWarning, IsError ,ClosePopup} = props;

    const MessageList = Message.split(",");

    const HeaderText = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "";
    const HeaderBcColor = IsSuccess ? "GreenClr" : IsWarning ? "YellowClr" : IsError ? "RedClr" : "YellowClr";
    const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
        : IsWarning ? <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />
            : IsError ? <Error ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
                : <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />;

    return (
        <>
            <div className="PopupBoxModal">
                <div className="PopupBody">
                    <div className={"PopupHeader " + HeaderBcColor}>
                        <div className="PopupHeaderText">
                            <span className="PopupHeaderTxt">{HeaderText}</span> {PopupHeaderIcon}
                        </div>
                        <div className="PopupHeaderIcon">
                            <div className="IconSpin">
                                <SpinnerIcon ClassNm="SpinnerIcon" IconColor="#fefefe" IconSize={1.4} />
                            </div>
                        </div>
                        <div className="PopupHeaderBtn">
                            <button className="PopupBtn" onClick={() => { ClosePopup(RedirectUrl) }}> <span>&times;</span> </button>
                        </div>
                    </div>
                    <div className="PopupMessageBody" >
                        <ul>
                            {
                                MessageList.map((msg, index) => (

                                    <li key={"PopupMSg " + index}>{msg}</li>
                                ))

                            }


                        </ul>
                    </div>
                    <div className="PopupFooter">
                        <button className={"okBtn " + HeaderBcColor} onClick={() => { ClosePopup(RedirectUrl) }}>OK</button>
                    </div>

                </div>
            </div>
        </>
    );
};
export default PopupBox;

In "toastify" folder we have Toastify.css and Toastify.jsx file.

Toastify.css and Toastify.jsx Code are Below

/*Toastify.css */
.ToastifyModal {
    position: relative;
    z-index: 1;
    margin-left: 23px;
    margin-top: 18px;
    margin-right: 33px;
    float: right;
    width: 16%;
    min-width: 318px;
    height: 75px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 11px;
    animation: FlipToast 1s;
    animation-timing-function: linear;
}

@keyframes FlipToast{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.ToastifyBody {
    position: absolute;
    width: inherit;
    min-width: inherit;
    height: inherit;
    min-height: inherit;
    border: 1px solid #888;
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.ToastifyHeader {
    width: 100%;
    height: 18px;
    display: flex;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;

}

.ToastifyHeaderText {
    width: 33%;
    min-width: 104px;
    height: 17px;
    border-top-left-radius: 11px;
    padding: 0px;
    margin-left: 13px;
}



.ToastifyHeaderTxt {
    font-size: 10px;
    font-family: cursive;
    font-weight: 100;
    padding: 1px 17px;
    display: block;
    float: left;
}

.ToastifyHeaderIcon {
    width: 10%;
    height: inherit;

}

.ToastifyHeaderBtn {
    width: 67%;
    height: inherit;
    display: flex;
    flex-direction: row-reverse;
    border-top-right-radius: 11px;

}

.ToastifyBtn {
    background: none;
    border: none;
    /* margin-left: 88px; */
    margin-top: -7px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

    .ToastifyBtn:hover {
        cursor: pointer;
        color: white;
    }

.ToastifyMessageBody {
    height: 49%;
    min-height: 26px;
    overflow-y: hidden;
    font-size: 13px;
}

.ToastifyFooter {
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}
/* OK Button */
.ToastifyProgressBar {
    color: white;
    background-color: #eaf0f9;
    border: none;
    text-align: center;
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    height: 13px;
    border: 1px solid;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}
.ToastifyProgressBarChild {
    text-align: center;
    font-size: 10px;
    height: 13px;
    border: 1px solid;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
} 

.ToastifyIconPopup {
    cursor: pointer;
    margin-left: 1px;
    margin-top: -2px;
}
.ToastifySpinnerIcon {
    cursor: pointer;
    margin-top: 3px;
    margin-left: 3px;
    border: 1px solid Blue;
}
.ToastifyIconSpin {
    position: absolute;
    margin-top: 1px;
    border-radius: 50%;
    height: 9px;
    width: 9px;
}

@media (prefers-reduced-motion: no-preference) {
    .ToastifyIconSpin {
        animation: ToastifyHeaderIconSpin infinite 2s linear;
    }
}

@keyframes ToastifyHeaderIconSpin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}



/*Toastify.jsx  */

import './Toastify.css';
import { CheckCircle, Warning, Error, SpinnerIcon } from '../Icons/Icons';
import { useEffect, useState } from 'react';

const Toastify = (props) => {
    const [progressBarIndicator, setProgressBarIndicator] = useState(100);
    const { Message, RedirectUrl, IsSuccess, IsWarning, IsError, ClosePopup,TimmerSpeedInMiliseconds,AutoClose } = props;

    const MessageList = Message.split(",");

    const HeaderText = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "";
    const HeaderBcColor = IsSuccess ? "GreenClr" : IsWarning ? "YellowClr" : IsError ? "RedClr" : "YellowClr";
    const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.5} />
        : IsWarning ? <Warning ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.6} />
            : IsError ? <Error ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.5} />
                : <Warning ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.6} />;
    let timerStart = null;
    useEffect(() => {
        if (AutoClose) {
            timerStart = setInterval(() => {
                setProgressBarIndicator((pre) => (pre - 1));
            }, TimmerSpeedInMiliseconds);

            return () => { clearInterval(timerStart) };
        }

    }, [progressBarIndicator]);

    useEffect(() => {
        if (progressBarIndicator === 10) {
            clearInterval(timerStart);
            ClosePopup(RedirectUrl);
        }
    }, [progressBarIndicator]);
    return (
        <>
            <div className="ToastifyModal">
                <div className={"ToastifyBody " + HeaderBcColor}>
                    <div className={"ToastifyHeader " + HeaderBcColor}>

                        <div className="ToastifyHeaderText">
                            <span className="ToastifyHeaderTxt">{HeaderText}</span> {PopupHeaderIcon}
                        </div>

                        <div className="ToastifyHeaderBtn">
                            <button className="ToastifyBtn" onClick={() => { ClosePopup(RedirectUrl) }}> <span>&times;</span> </button>
                        </div>

                    </div>

                    <div className="ToastifyMessageBody" >
                        <ul>
                            {
                                MessageList.map((msg, index) => (

                                    <li key={"ToastifyMSg " + index}>{msg}</li>
                                ))

                            }


                        </ul>
                    </div>

                    {AutoClose &&
                        <div className="ToastifyFooter">
                        <div className={"ToastifyProgressBar"} >
                            <div className={"ToastifyProgressBarChild " + HeaderBcColor} style={{ width: `${progressBarIndicator}%` }} >
                                {progressBarIndicator + "%"}
                            </div>
                        </div>
                    </div>
                    }
                </div>
            </div>
        </>
    );
};
export default Toastify;

Now Times to call our Message PopupBox and Toastify,for that, i call this both component in App.js file, Code are Below.

*App.js File *

import { useState } from 'react';
import './App.css';
import PopupBox from './component/popup/PopupBox';
import Toastify from './component/toastify/Toastify';

function App() {

    const [msgBox, setMsgBox] = useState("");
    const ClosePopup = (RedirectUrl) => {
        setMsgBox("");

    }

    const ShowMe = (reqType) => {

        if (reqType === "successP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Succes Message" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} ClosePopup={ClosePopup} />);
        } else if (reqType === "errorP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Error Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} ClosePopup={ClosePopup} />);
        } else if (reqType === "warnP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Warnning Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} ClosePopup={ClosePopup} />);
        }
        else if (reqType === "successT") {
            setMsgBox(()=>(""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={true} />);
        } else if (reqType === "errorT") {
            setMsgBox(() => (""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={false} />);
        } else if (reqType === "warnT") {
            setMsgBox(() => (""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={false} />);
        }

    }

    return (
        <div > {msgBox}
        <div className="App">

          <button className="GreenClr btnshap" onClick={() => { ShowMe("successP") }}>Success Popup </button>
          <button className="YellowClr btnshap" onClick={() => { ShowMe("warnP") }} >Warnig Popup</button>
          <button className="RedClr btnshap" onClick={() => { ShowMe("errorP") }}>Error Popup</button>

          <button className="GreenClr btnshap" onClick={() => { ShowMe("successT") }}>Success toastify </button>
          <button className="YellowClr btnshap" onClick={() => { ShowMe("warnT") }} >Warnig toastify</button>
          <button className="RedClr btnshap" onClick={() => { ShowMe("errorT") }}>Error toastify</button>

            </div>
        </div>
  );
}

export default App;

*For looking pretty good looking,We need some css for app.js *

app.css


.App {

    display: flex;
    margin: 20px;
    padding: 10px;
}


.GreenClr {
    background: #05b20d;  
}

.YellowClr {
    background: #ee3535;
}

.RedClr {
    background: #ecb90d;
}

.btnshap {
    padding: 8px;
    margin: 3px;
    border-radius: 5px;
    width: 113px;
    text-align:center;
}
    .btnshap:hover{
        color:white;
    }

.IconPopup {
    cursor: pointer;
    margin-left: 8px;
    margin-top: 8px;
}
.SpinnerIcon {
    cursor: pointer;
    margin-top: 3px;
    margin-left: 3px;
}

Wow ! Looking Good , Finally we create our own Popup Message Box Or toastify In React for light weight Code and avoid Security Bridge !

Drop some love by liking or commenting ♥

Reference React

Download Source Code from GitHub Repository

How Validate Form Input Data In React Or Any JavaScript Web Application ?

Radheshyam Gupta — Fri, 22 Dec 2023 20:12:20 +0000

Go For Live Demo

In React Or Any JavaScript Web Application ,it is big challenging job to provide Valid Warning Message to User to provide Valid Data.

Today I just show to you with small program to fulfilled this challenging job in very easy way.

Now times to show Code;

First we Create A Method who Validate Out model .

//Note validateModel and validateModelData are javascript Object.
validateModel is our Model where we store our form data and 
validateModelData is model where we store out Validation message regarding our form Model with same key with Validation message .

export const ValidateMyModel = (validateModel, validateModelData) => {

    const validateFilterModel = {};
    const ReturnErrorList = [];

    for (const [key, value] of Object.entries(validateModelData)) {
        if (validateModel.hasOwnProperty(key)) {
            validateFilterModel[key] = validateModel[key];
        }
    }

    for (const [key, value] of Object.entries(validateFilterModel)) {
        if (!value)
        {
            ReturnErrorList.push(validateModelData[key]);
        }
    }
    return ReturnErrorList;


}

*Now Time To implement this ValidateMyModel() on submit button.
I call a function submitData() on button click to save data.
*

const submitData = () => {

 const ErrorList = ValidateMyModel(modelData, RequiredFiledModel);

        if (ErrorList.length === 0) {

            if (TermsCondition) {
                alert("Data Successfully Saved")
            }
            else {
                alert("Please accept Terms and Condition");
            }
        }
        else {
            alert(ErrorList.toString());
        }


    }

*Now I share With You all Code below
*

1) App.js File

import { useState } from 'react';
import './App.css';
import { countryList, DetailsModel, monthNames, RangeData, ValidateMyModel, RequiredFiledModel } from './Model/Model';

function App() {

    const [modelData, setModelData] = useState(DetailsModel);

    const { Name, Gender, Phone, Birthdate, BirthdateMonth, BirthdateYear,TermsCondition,Street,Nationality,City,Country } = modelData;

    const onInputChange = (event) => {

        const { name, value } = event.target;

        if (name === "TermsCondition") {
            if (event.target.checked) {

                setModelData((pre) => ({ ...pre, [name]: true }));
            }
            else {
                setModelData((pre) => ({ ...pre, [name]: false }));
            }

        }
        else {
            setModelData((pre) => ({ ...pre, [name]: value }));
        }


    }

    const submitData = () => {

        const ErrorList = ValidateMyModel(modelData, RequiredFiledModel);


        if (ErrorList.length === 0) {

            if (TermsCondition) {
                alert("Data Successfully Saved")
            }
            else {
                alert("Please accept Terms and Condition");
            }
        }
        else {
            alert(ErrorList.toString());
        }


    }

  return (
      <>

          <div className="main-block">
              <div className="formBody">
                      <h1>Model Validate Example</h1>                     
                      <fieldset>
                          <legend>
                              <h3>Personal Details</h3>
                          </legend>
                          <div className="personal-details">
                          <div>
                              <div><label>Name*</label><input type="text" name="Name" value={Name } onChange={(e) => { onInputChange(e)} } /></div>
                              <div><label>Phone*</label><input type="text" name="Phone" value={Phone} onChange={(e) => { onInputChange(e)} } /></div>
                              <div><label>Street</label><input type="text" name="Street" value={Street } onChange={(e) => { onInputChange(e)} } /></div>
                              <div><label>City*</label><input type="text" name="City" value={City } onChange={(e) => { onInputChange(e)} } /></div>
                                  <div>
                                  <label>Country*</label>
                                  <select name="Country" value={Country} onChange={(e) => { onInputChange(e) }} >
                                          <option value=""></option>
                                      {countryList.map((item, index) => (
                                          <option key={index + "Country"} value={item} >{item}</option>
                                      ))}
                                      </select>
                                  </div>

                              </div>
                              <div>
                                  <div>
                                      <label>Gender*</label>
                                      <div className="gender">
                                      <input type="radio" value="Male" id="male" name="Gender"  onChange={(e) => { onInputChange(e)} } />
                                          <label htmlFor="male" className="radio">Male</label>
                                      <input type="radio" value="Female" id="female" name="Gender"  onChange={(e) => { onInputChange(e)} } />
                                          <label htmlFor="female" className="radio">Female</label>
                                      </div>
                                  </div>
                                  <div className="birthdate">
                                      <label>Birthdate*</label>
                                  <div className="bdate-block">
                                      <select className="day" name="Birthdate" value={Birthdate} onChange={(e) => { onInputChange(e) }} >
                                          <option value=""></option>
                                          {
                                              RangeData(1,31)?.map((item, index) => (

                                                  <option key={index + "Date"} value={"0" + item}>{"0" + item}</option>

                                          ))                              
                                          }   
                                          </select>
                                      <select className="month" value={BirthdateMonth} name="BirthdateMonth" onChange={(e) => { onInputChange(e)} } >
                                          <option value=""></option>
                                          {monthNames.map((item, index) => (
                                              <option key={index + "month"} value={item} >{item}</option>
                                          ))}
                                          </select>
                                      <input type="text" name="BirthdateYear" value={BirthdateYear } onChange={(e) => { onInputChange(e)} } />
                                      </div>
                                  </div>
                                  <div>
                                      <label>Nationality*</label>
                                  <select name="Nationality" value={Nationality} onChange={(e) => { onInputChange(e)} } >
                                      <option value=""></option>
                                      {countryList.map((item, index) => (
                                          <option key={index + "Nationality"} value={item} >{item }</option>
                                          ))}
                                      </select>
                                  </div>                                  
                              </div>
                          </div>
                      </fieldset>
                      <fieldset>
                          <legend>
                              <h3>Terms and Condition</h3>
                          </legend>
                          <div className="terms-mailing">
                          <div className="checkbox">
                              <input type="checkbox" name="TermsCondition" checked={TermsCondition} onChange={(e) => { onInputChange(e) }} /><span>I accept the <a href="https://biharisoft.com/EduBox/">Biharisoft</a></span>
                              </div>                          
                              </div>
                  </fieldset>
                  <button type="submit" onClick={() => { submitData()} }>Submit</button>
              </div>
              </div>

      </>
  );
}

export default App;

2) Mode.js

export const DetailsModel = {

    Name:"",
    Gender:"",
    Phone:"",
    Birthdate:"",
    Street: "",
    Nationality: "",
    City:"",
    Country: "",
    BirthdateMonth: "",
    BirthdateYear: "",
    TermsCondition: false

};


export const RequiredFiledModel = {

    Name: "Name Required",    
    Phone: "Phone Required",
    Birthdate: "Birth Date Required",
    Nationality: "Nationality Required",
    Country: "Country Required",
    BirthdateMonth: "Birth Month Required",
    BirthdateYear: "Birth Year Required"


};

export const countryList = [
    "Afghanistan",    
    "India",
    "Indonesia",
    "Iran (Islamic Republic of)",
    "Nepal",
    "United Kingdom of Great Britain and Northern Ireland (the)",
    "United States Minor Outlying Islands (the)",
    "United States of America (the)",
];

export const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"];

export const RangeData = (startVal, RangeVal) => {

    const List = [];
    for (let i = startVal; i <= RangeVal; i++) {
        List.push(i);
    }
    return List;
}

export const ValidateMyModel = (validateModel, validateModelData) => {
    console.log(validateModel);
    const validateFilterModel = {};
    const ReturnErrorList = [];

    for (const [key, value] of Object.entries(validateModelData)) {
        if (validateModel.hasOwnProperty(key)) {
            validateFilterModel[key] = validateModel[key];
        }
    }

    for (const [key, value] of Object.entries(validateFilterModel)) {
        if (!value)
        {
            ReturnErrorList.push(validateModelData[key]);
        }
    }
    return ReturnErrorList;


}

3)App.css

html, body {
    min-height: 100%;
}

body, div, form, input, select, p {
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #666;
}

h1 {
    margin: 0;
    font-weight: 400;
}

h3 {
    margin: 12px 0;
    color: #8ebf42;
}

.main-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.formBody {
    width: 100%;
    padding: 20px;
}

fieldset {
    border: none;
    border-top: 1px solid #8ebf42;
}

.account-details, .personal-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .account-details > div, .personal-details > div > div {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .account-details > div, .personal-details > div, input, label {
        width: 100%;
    }

label {
    padding: 0 5px;
    text-align: right;
    vertical-align: middle;
}

input {
    padding: 5px;
    vertical-align: middle;
}

.checkbox {
    margin-bottom: 10px;
}

select, .children, .gender, .bdate-block {
    width: calc(100% + 26px);
    padding: 5px 0;
}

select {
    background: transparent;
}

.gender input {
    width: auto;
}

.gender label {
    padding: 0 5px 0 0;
}

.bdate-block {
    display: flex;
    justify-content: space-between;
}

.birthdate select.day {
    width: 49px;
}

.birthdate select.month {
    width: calc(100% - 94px);
}

.birthdate input {
    width: 38px;
    vertical-align: unset;
}

.checkbox input, .children input {
    width: auto;
    margin: -2px 10px 0 0;
}

.checkbox a {
    color: #8ebf42;
}

    .checkbox a:hover {
        color: #82b534;
    }

button {
    width: 100%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #8ebf42;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

    button:hover {
        background: #82b534;
    }

@media (min-width: 568px) {
    .account-details > div, .personal-details > div {
        width: 50%;
    }

    label {
        width: 40%;
    }

    input {
        width: 60%;
    }

    select, .children, .gender, .bdate-block {
        width: calc(60% + 16px);
    }
}

Well done! You now have Done Form Model Validation in React Web App!

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How mange Global State Management In React With the Help of useContext() Hook and time to say bye-bye Redux ?

Radheshyam Gupta — Sat, 16 Sep 2023 18:49:19 +0000

Go For Live Demo For Shopping Cart Web App

Go For Live Demo For Dynamic Global Popup Box
And also cover How to make Dynamic Global Popup Box (Success,Warn,Error) and mange it with Context hook for Web App?

React Hooks Which played a big role for developing React Application are useState(),useEffect(),useRef(),useContext() and More.

In This post i shall work on useContext() Hook to Manage Global State.Basically We Create A Shopping Cart Web App Who manage All Carting Facility, like add Item in Cart,remove Item From Cart,Calculate Cart Value and so on.

Now we Come on Our Topic.

1) First we Create a Folder With Store Context file name like **"GlobalContext" and Add new js file "GlobalContext.js".**

import React, { createContext } from 'react';

const GlobelContext = createContext("");
export default GlobelContext;

*2)Now We Create a JavaScript List who store out Item Details.
for this we also create a separate Folder and File on your desire.
I have "DbFile " Folder and "BookList.js" file.
*

/*This image use for showing item*/
import Grewal from "./Image/Book1.jpg";
import RVK from "./Image/Book2.jpg";
import Radha from "./Image/Book3.jpg";
import Aggarwal from "./Image/Book4.jpg";
export const BookList = [
    {
        BookId:1,
        BookImgSrc: Grewal,
        BookName: "T.S.Grewal's Double Entry Book Keeping…",
        BookPrice:765.00,
        BookPriceDisCount:800.00,
        BookPublisher:"T.S.Grewal's",
        ItemQnt:1,
    },
    {
        BookId: 2,
        BookImgSrc: RVK,
        BookName:"Introductory Macroeconomics And Indian Economic Development",
        BookPrice:944.00,
        BookPriceDisCount:954.00,
        BookPublisher: "RVK Global Publications Pvt, LtdVK Global Publications Pvt Ltd",
        ItemQnt: 1,
    },
    {
        BookId: 3,
        BookImgSrc: Radha,
        BookName:"Indian Economic Development & Introductory Macroeconomic",
        BookPrice:688.00,
        BookPriceDisCount:750.00,
        BookPublisher: "Radha Bahuguna",
        ItemQnt: 1,
    },
    {
        BookId: 4,
        BookImgSrc: Aggarwal,
        BookName:"Secondary School Mathematics for Cl…",
        BookPrice:729.00,
        BookPriceDisCount:835,
        BookPublisher: "R.S. Aggarwal",
        ItemQnt: 1,
    },

];

3)Now time to Create a Folder like **component which hold our all component like** BookCard.jsx ,CartCard.jsx,NavBar.jsx ,PopupBox.jsx and PopupBox.css** file **

a)BookCard.jsx which show our Individual Item Details.

import { useContext } from "react";
import { BookList } from "../DbFile/BookList";
import GlobelContext from "../GlobalContext/GlobalContext";
import PopupBox from "./PopupBox";

const BookCard = (props) =>
{
    const { cartValue, setCartValue, setShowPopupBox } = useContext(GlobelContext);

    const { BookImgSrc, BookName, BookPrice, BookPriceDisCount, BookPublisher, BookId } = props;

    const AddProductInCard = (Item) => {
        const isAvailabe = cartValue.some(obj => obj.BookId === Item);
        if (!isAvailabe) {
            const CartItem = BookList.find((bookItem) => { return bookItem.BookId === Item });

            setCartValue((pre) => ([...pre, CartItem]));
            setShowPopupBox(<PopupBox Message="Item Successfully Added In Your Cart,Go Cart to Buy" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} />);
        }
        else
        {
            setShowPopupBox(<PopupBox Message="Allready In Cart,Go To Cart to See" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} />);
        }



    }
    return (
        <>
            <div className="BookCard">
                <img className="BookCardImg" src={BookImgSrc} alt={BookPublisher} />
                <div>
                    <span className="BookTitle">{BookName}</span><br/>
                    <span className="BookPubisher">{BookPublisher}</span><br/>
                </div>
                <div className="BookPriceText">
                    <span>₹&nbsp;{BookPrice}&nbsp;</span>
                    <span className="BookPrice">₹&nbsp;{BookPriceDisCount}&nbsp;&nbsp;</span>
                    <button className="CartBtn" onClick={() => { AddProductInCard(BookId)} }>Add Cart</button>
                    <br />
                </div>
            </div>

        </>
    );
}
export default BookCard;

b)CartCard.jsx which show our Individual Item Details In Cart page.

import { useContext } from "react";
import { BookList } from "../DbFile/BookList";
import GlobelContext from "../GlobalContext/GlobalContext";
import PopupBox from "./PopupBox";

const CartCard = (props) => {
    const { cartValue, setCartValue, setShowPopupBox } = useContext(GlobelContext);

    const { BookImgSrc, BookName, BookPrice, BookPriceDisCount, BookPublisher, BookId, ItemQnt } = props;

    const DeleteProductFromCard = (Item) => {

        const CartItem = cartValue.filter((bookItem) => { return bookItem.BookId !== Item });

        setCartValue((pre) => (CartItem));
        setShowPopupBox(<PopupBox Message="Item Deleted" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} />);

    }

    const AddNewItemInCard = (event, Item) => {
        const { value } = event.target;

        const CartItem = cartValue.filter((bookItem) => {
            if (bookItem.BookId === Item) {
                return bookItem.ItemQnt = parseInt(value);
            }
            else {
                return bookItem;
            }
        });

        setCartValue((pre) => (CartItem));

    }

    return (
        <>
            <div className="CartCard">
                <div className="CartCardLeft">
                    <img className="CartCardImg" src={BookImgSrc} alt={BookPublisher} />
                </div>
                <div className="CartCardRight">
                    <span className="CartTitle">{BookName}</span><br />
                    <span className="BookPubisher">By&nbsp; {BookPublisher}</span><br />

                    <span>₹&nbsp;{BookPrice}&nbsp;</span>
                    <br />
                    <br />
                    <br />
                    <br />
                    <select className="CartValue" value={ItemQnt} onChange={(event) => { AddNewItemInCard(event, BookId) }} >
                        <option value={1}>1</option>
                        <option value={2}>2</option>
                        <option value={3}>3</option>
                        <option value={4}>4</option>
                    </select>
                    <button className="DeleteBtn" onClick={() => { DeleteProductFromCard(BookId) }}>Delete</button>
                    <br />
                </div>

            </div>

        </>
    );
}
export default CartCard;

c)NavBar.jsx which show our NavBar and Added Item Count.

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import GlobelContext from '../GlobalContext/GlobalContext';
import { ShoppingCart } from '../Icons/Icons';
const NavBar = () => {

    const { cartValue } = useContext(GlobelContext);
    let cartVal = cartValue.length;
    return (<>

        <div className="Navbar">
            <div className="NavbarLogo">
                <Link to="/">
                    <h3>BihariSoft ,The Online Edu Shop</h3>
                </Link>
            </div>
            <div className="NavbarLogo">
                <Link to="/ShowPopup">
                    <h3>ShowPopup page</h3>
                </Link>
            </div>
            <div className="Cart">
                <Link to="/Cart" >
                <ShoppingCart ClassNm="IconCart" IconColor="blue" IconSize={2} />
                 <span className="IconCartVal">{cartVal}</span>                    
                </Link>
                <h6>Cart</h6>
            </div>
        </div>
    </>)
}
export default NavBar;

d)PopupBox.jsx which show our Popup Box .

import React, { useContext } from 'react';
import GlobelContext from '../GlobalContext/GlobalContext';
import { CheckCircle, Error, Warning } from '../Icons/Icons';
import './PopupBox.css';

const PopupBox = (props) => {
    console.log(props)

    const { ClosePopup } = useContext(GlobelContext);
    console.log(ClosePopup)
    const { Message, RedirectUrl, IsSuccess, IsWarning, IsError } = props;

    const MessageList = Message.split(",");

    const PopupHeader = IsSuccess ? "PopupSucces" : IsWarning ? "PopupWarn" : IsError ? "PopupError" : "PopupWarn";

    const PopupHeaderMsg = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "Warning";

    const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
        : IsWarning ? <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />
            : IsError ? <Error ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
                : <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />;
    const CloseMe = () => {

        ClosePopup(RedirectUrl);
    }

    return (

        <>

            <div className="PopupBoxmodal">

                <div className="PopupBoxModalContent">
                    <div className={"PopupHeader " + PopupHeader}>
                        <div className="PopupHeaderTitle"><b>{PopupHeaderMsg}</b>{PopupHeaderIcon}</div>
                        <div className="PopupBoxClose">
                            <span onClick={() => { CloseMe() }}>&times;</span>
                        </div>
                    </div>
                    <div className="PopupMessageBody" >
                        <ul>
                            {
                                MessageList.map((msg,index)=>(

                                    <li key={"PopupMSg " + index}>{msg}</li>
                                ))

                            }


                        </ul>
                    </div>


                    <div className="PopupFooter">
                        <button className={"Popupbtn " + PopupHeader} onClick={() => { CloseMe() }}> Ok</button>
                    </div>
                </div>

            </div>
        </>
    );
}

export default PopupBox;

e)PopupBox.css for Popup Box .

.PopupBoxmodal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.PopupBoxModalContent {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 1px solid #888;
    width: 42%;
    border-radius: 9px;
    position: relative;
    height: 272px;
}
.PopupHeader {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    border-bottom: 1px solid #e6eaec;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
    /* The Close Button */
.PopupBoxClose {   
    position: absolute;
    top: 5px;
    right: 7px;
    color: #fff;
    text-shadow: none;
   /* opacity: 0.5;*/
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 20px;
    font-size: 28px;
}
.PopupBoxClose span {
    margin-top: 0px;
    margin-left: 8px;
    display: block;
}
    .PopupBoxClose:hover, .PopupBoxClose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.PopupSucces 
{
  background: #82ce34;

}
.PopupError 
{
  background: #ee3535;
}
.PopupWarn 
{
background: #eda645;
}
.IconPopup {
    cursor: pointer;
    margin-left: 21px;
    margin-top: -4px;
    position: absolute;
}
.PopupHeaderTitle {
    padding: 14px;
    color: aliceblue;
}
.PopupSucces:hover, .PopupSucces:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.PopupMessageBody {
    padding: 14px;
    height: 54%;
    overflow-y: auto;
}
.PopupMessageBody ul li{
   padding: 4px;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.PopupFooter {
    padding: 14px;
    height: 7%;
    border-top: 1px solid;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    background: #ecf0f1;
    border-color: #e6eaec;
}

.Popupbtn {
    color: #fff;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    border-radius: 3px;
    padding: 6px 20px;
    min-width: 75px;
    border: none;
    margin-left: 69%;
}
.Popupbtn:hover {
    cursor: pointer;
}

4) Create another Folder name like **Icons **which hold our Popup Icons File Icons.js .


import React from 'react';


export const ShoppingCart = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" >
            <path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" />
        </svg >

        );
};

export const CheckCircle = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`}  xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};
export const Warning = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
        </svg>

        );
};
export const Error = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};

5)And Now Create a Folder **CommonService which hold CommonService.js file .In this file we create a function calculateSum() which manipulate Cart Item Count**

export const calculateSum = (array, property, property2,reqTye) => {

        const total = array.reduce((preSum, obj) => {
            return reqTye === "proOne" ?
                (preSum + obj[property]) :
                ((preSum + obj[property]) * obj[property2]);
        }, 0);

        return total;

}

6)Now time to Create a Folder **pages which hold Three pages file name like HomePage.jsx ,MyCart.jsx and ShowPopup.jsx.**

a)HomePage.jsx which show our Product List.

import React from 'react';
import BookCard from '../component/BookCard';
import NavBar from '../component/NavBar';
import { BookList } from '../DbFile/BookList';
const HomePage = () => {

    return (<>
        <NavBar />
        <div className="BookCardBody">
            {
                BookList.map((item,index) => (

                    <BookCard key={index + "book"} BookId={item.BookId} BookImgSrc={item.BookImgSrc} BookName={item.BookName} BookPrice={item.BookPrice} BookPriceDisCount={item.BookPriceDisCount} BookPublisher={item.BookPublisher} />
                    ))
            }
        </div>

    </>)
}

export default HomePage;

*b)MyCart.jsx which show our Cart Details. *

import React, { useContext } from 'react';
import { calculateSum } from '../CommonService/CommonService';
import CartCard from '../component/CartCard';
import NavBar from '../component/NavBar';
import GlobelContext from '../GlobalContext/GlobalContext';
const MyCart = () => {

    const { cartValue, setCartValue } = useContext(GlobelContext);
    const TotalCartValue = calculateSum(cartValue, "BookPrice", "ItemQnt", "proTwo");
    const TotalCartCount = calculateSum(cartValue, "ItemQnt", "", "proOne");
    return (
        <>
            <NavBar/>
        <h1>Shopping Cart</h1>
            <div className="CartBody">
                <div className="CartBodyLeft" >
                {
                    cartValue.map((item, index) => (

                        <CartCard key={index + "book"} BookId={item.BookId} BookImgSrc={item.BookImgSrc} BookName={item.BookName} BookPrice={item.BookPrice} BookPriceDisCount={item.BookPriceDisCount} BookPublisher={item.BookPublisher} ItemQnt={item.ItemQnt } />
                    ))
                    }
                </div>
                <div className="CartBodyRight">
                    <table className="CartTable">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Mrp</th>
                                <th colSpan="2">Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            {
                                cartValue.map((item, index) => (
                                    <tr className="TotalCartTxt" key={item.BookName + index}>
                                        <td className="BookPubisher">{item.BookName}</td>
                                        <td>₹&nbsp;{item.BookPrice}</td>
                                        <td>{item.ItemQnt}</td>
                                        <td>{item.BookPrice * item.ItemQnt}</td>
                                    </tr>

                                ))
                            }


                        </tbody>
                        <tfoot>
                            <tr>
                                <td><h5>Total Item&nbsp;{TotalCartCount}&nbsp;</h5></td>

                                <td colSpan="3" style={{ textAlign: 'right' }}><strong> ₹&nbsp;{TotalCartValue}&nbsp;</strong></td>
                            </tr>
                        </tfoot>
                    </table>

                    <button className="proceedBtn">Proceed to Buy</button>
                </div>
        </div>

    </>)
}
export default MyCart;

*C)ShowPopup.jsx which show our Dynamic PopupBox . *


import { useContext } from "react";
import NavBar from "../component/NavBar";
import PopupBox from "../component/PopupBox";
import GlobelContext from "../GlobalContext/GlobalContext";
import './../component/PopupBox.css';

const ShowPopup = () => {

    const { setShowPopupBox } = useContext(GlobelContext);/* call  useContext */


    const ShowMe = (reqType) => {
        if (reqType === "success") {

            setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Succes Message" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} />);
        }else if (reqType === "error") {

            setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Error Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} />);
        }else if (reqType === "warn") {

            setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Warnning Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} />);
        }
    }
    return (
        <><NavBar/>
            <button className="PopupSucces" onClick={() => { ShowMe("success") }}>Success Popup </button>
            <button className="PopupWarn" onClick={() => { ShowMe("warn") }} >Warnig Popup</button>
            <button className="PopupError" onClick={() => { ShowMe("error") }}>Error Popup</button>
        </>
        );
}

export default ShowPopup;

Now Time to wrap All Our Pages with Context Provider in App.js File.

import './App.css';
import React, {  useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import GlobelContext from './GlobalContext/GlobalContext';
import MyCart from './pages/MyCart';
import ShowPopup from './pages/ShowPopup';
function App()
{
    const [cartValue, setCartValue] = useState([]);
    const [showPopupBox, setShowPopupBox] = useState("");

    const ClosePopupBox = (props) => {
         setShowPopupBox("");
    }

   /* Create Global Store Who Manage Our Global State*/
    const  StoreDbContext = {
        cartValue: cartValue,
        setCartValue: setCartValue,
        setShowPopupBox: setShowPopupBox,
        ClosePopup: ClosePopupBox,

        }
  return (
      <>  
          <GlobelContext.Provider value={StoreDbContext}>
              {showPopupBox}  
          <BrowserRouter>
              <Routes>
                  <Route path="/" element={<HomePage />} />
                  <Route index element={<HomePage />} />
                  <Route path="/Cart" element={<MyCart />} />
                  <Route path="/ShowPopup" element={<ShowPopup />} />
              </Routes>
              </BrowserRouter>
          </GlobelContext.Provider>
      </>   
  );
}

export default App;

Update Your index.css File With below css File

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
    background-color: #F3F3F4;
    font-family: Arial, Helvetica, sans-serif;
    overflow-y: scroll;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.Navbar {
    display: flex;
    background-color: #a30d3b;
    border: 1px solid black;
    height: 56px;
}
.NavbarLogo {
    display: flex;
    width: 80%;
}
.Cart {
    display: flex;
    width: 20%;
}
.Cart a {
    text-decoration: none;

}
.Cart h6 {
  position: absolute;
    margin-left: 45px;
}
.NavbarLogo a {
    margin-left: 16px;
    color: forestgreen;
    text-decoration: none;
}
.IconCart {
    cursor: pointer;
    color: white;
    margin-left: 7px;
    margin-top: 12px;
    position: absolute;
}
.IconCartVal {
    cursor: pointer;
    color: white;
    margin-left: 12px;
    margin-top: 9px;
    position: absolute;
}
.BookCardBody {
    display: inline-flex;
    flex-wrap: wrap;
    margin-left: 30px;
}
.BookCard {
    width: 186px;
    height: 304px;
    color: black;
    border: 1px solid yellow;
    margin: 10px;
    padding: 3px;
    background-color: #ffffff;
}
.BookCardImg {
    width: 100%;
    height: 63%;
    color: white;
}
.BookTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: block;
    line-height: 1em; /* a */
    max-height: 2em; /* a x number of line to show (ex : 2 line)  */
}
.BookPubisher {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: block;
    line-height: 1em; /* a */
    max-height: 1em; /* a x number of line to show (ex : 2 line)  */
}
.BookPrice {
    text-decoration: line-through;
}
.BookPriceText {
    font-weight: 700;
}
.CartBtn {
    padding: 2px;
    border: 2px solid #f14836;
    background-color: Background;
    border-radius: 50px;
    color: #f14836;
    cursor: pointer;
}
.CartBtn:hover {
    border: 2px solid Background;
    background-color: #f14836;
    border-radius: 50px;
    color: Background;  
}
.CartBody {
    display: inline-flex;
    flex-wrap: wrap;
    margin-left: 30px;
    border-top: 2px solid black;
    padding: 10px;
    height: 100%;
    width: 97%;
}
.CartBodyLeft {    
    height: 100%;
    width: 70%;
}
.CartBodyRight {
    margin: 10px;
    padding: 3px;
    height: 100%;
    width: 25%;
    background-color: #ffffff;
    margin-left: 30px;
}

.CartCard {
    display:flex;
    width: 100%;
    height: 304px;
    color: black;
    border: 1px solid yellow;
    margin: 10px;
    padding: 3px;
    background-color: #ffffff;
}

.CartCardLeft {
    padding: 20px;
}
.CartCardRight {
    padding: 20px;
}
.CartCardImg {
    width: 100%;
    height: 100%;
}

.CartTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: block;
    line-height: 1em; /* a */
    max-height: 2em; /* a x number of line to show (ex : 2 line)  */
}
.DeleteBtn {
    padding: 2px;
    border: 2px solid #f14836;
    background-color: Background;
    border-radius: 7px;
    color: #f14836;
    cursor: pointer;
}

    .DeleteBtn:hover {
        border: 2px solid Background;
        background-color: #f14836;
        border-radius: 50px;
        color: Background;
    }

.CartValue {
    padding: 1px;
    border: 2px solid #f14836;
    background-color: #f0f2f2;
    border-radius: 7px;
    width: 66px;
    margin: 7px;
    color: #f14836;
    cursor: pointer;
    text-align: center;
}
.CartBodyRight h3 {
    text-align: right;
}
    .proceedBtn {
    cursor: pointer;
    border: 0;
    text-align: center;
    vertical-align: middle;
    background: #FFD814;
    border-color: #FCD200;
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
    width: 80%;
    padding: 5px;
    margin: 7px;
}
.TotalCartTxt {
    color: black;
    font-weight: 500;
    font-family: 'Times New Roman', Times, serif;

}
table, th, td, th {
    padding: 2px;
    border: 1px solid black;
    border-collapse: collapse;
}
.CartTable {
    width: 100%;
    background-color: #E7E9EB;
}

Well done! Finally mange Global State Management In React With the Help of useContext() Hook And make Dynamic Global Popup Box (Success,Warn,Error) for Web App!

Drop some love by liking or commenting ♥

Reference w3schools

Reference fonts.google

Download Source Code from GitHub Repository

How to integration Digital persona 4500 fingerprint reader in asp.net core(Razor Page)?

Radheshyam Gupta — Fri, 07 Jul 2023 07:09:19 +0000

How to Add Form Validation in React using React useRef() Hook ?

Radheshyam Gupta — Sat, 21 Jan 2023 12:16:54 +0000

Go For Live Demo

If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.

Hook Which played a big role for developing React Application are useState(),useEffect(),useRef() and More .

In This post i will work on useState() Hook to Save input Data and useRef() for Form Validation.

Now we Come on Our Topic.

How to Create a Form in React? it is Design Part only

<>
            <div className='FormValBody'>

                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Name<span className='FormErrorLabelSp'>*</span></label></div>
                    <input ref={(element) => formValidateRef.current[0] = element} type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Mobile No<span className='FormErrorLabelSp'>*</span></label></div>
                    <input ref={(element) => formValidateRef.current[1] = element} type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e) }} /></div>


                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Email Address<span className='FormErrorLabelSp'></span></label></div>
                    <input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Gender<span className='FormErrorLabelSp'>*</span></label></div>
                    <label> Male </label>
                    <input ref={(element) => formValidateRef.current[2] = element} type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e) }} />
                    <label> Female </label>
                    <input ref={(element) => formValidateRef.current[3] = element}  name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'>
                    <div className='labelSeprater'>
                        <label >Date of Birth<span className='FormErrorLabelSp'>*</span></label>
                    </div>
                    <input ref={(element) => formValidateRef.current[4] = element} type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Language<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>Hindi</label>
                    <input ref={(element) => formValidateRef.current[5] = element} type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e) }} />
                    <label>Marathi</label>
                    <input ref={(element) => formValidateRef.current[6] = element}  name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e) }} />
                    <label>English</label>
                    <input ref={(element) => formValidateRef.current[7] = element}  name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e) }} />
                </div>
                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Country<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>India</label>
                    <input ref={(element) => formValidateRef.current[8] = element} type='checkBox' name='Country' value='India' onChange={(e) => { onInputChange(e) }} />
                    <label>Nepal</label>
                    <input ref={(element) => formValidateRef.current[9] = element} name='Country' type='checkBox' value='Nepal' onChange={(e) => { onInputChange(e) }} />
                   </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >State<span className='FormErrorLabelSp'>*</span></label></div>
                    <select ref={(element) => formValidateRef.current[10] = element} name='State' value={State} onChange={(e) => { onInputChange(e) }}>
                        <option value=''>---Select---</option>
                        {StateName.map((sName, index) => (
                            <option key={index + sName} value={sName}>{sName}</option>
                        ))}
                    </select></div>

                <button className='btnAdd' onClick={AddBtnFnt}>Add</button>
            </div>



        </>

Now We Create App.css file for Styling Our Form.

App.css

/*form Validation */

.FormValBody {
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: azure;
}

    .FormValBody input {       
        padding: 5px 5px 5px 5px;
        border-color: gainsboro;
        outline-color: darkgrey;
        font-family: 'Times New Roman';
        font-size: 18px;
    }
.FormValBody input:active{
    outline-color:blue;
}

.FormValInputLabelSp {
    width: 393px;
    margin-top: 7px;
}
.labelSeprater {
    width: 133px;
    display: inline-block;
}

.FormErrorLabelSp {
    font-family: 'Comic Sans MS';
    font-size: 12px;
    color: red;
}

.btnAdd {
    margin-top:25px;
    margin-bottom:15px;
    margin-left: 38%;
    border: none;
    padding: 10px 20px 10px 20px;
    background-color: ButtonFace;
}
.btnAdd:hover{
    cursor:pointer;
}

For Form Validation And Getting input Fields Value ,First We create Model related to our form.
Model For Form

Model Object

const DetailsModel = {
    Name: '',
    MobileNo: '',
    EmailAddress: '',
    Gender: '',
    DateOfBirth: '',
    Language: [],
    State: '',
    Country:''
}

Create Array of List For Our Drop-Down List.

const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];

Next We use useState() Hook For Storing Input Data and useRef() HooK for Validate Our Form

const [details, setDetails] = useState(DetailsModel);
 const formValidateRef = useRef([]);

For Easily Access Value Of Our Object Model Key Value, we destructure our Model Object

Deestructuring Object

/* Deestructuring Object*/

    const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State } = details;

Now We Create a Arrow Function For Update Out Input Field Value State.
onInputChange() function

const onInputChange = (e) => {

        const { name, value } = e.target;

        if (e.target.type === 'checkbox') {

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
            }
            else {
                const filterData = eval(name).filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

        else {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }

    }

After Storing This all Form Input fields data in state ,Now Time To validate Form. So We Create New Arrow Function for Validation.
ValidateData() function

const ValidateData = () => {
        const validateArray = [];
        const checkedList= [];
        const unCheckedList= [];
        for (let i = 0; i < formValidateRef.current.length; i++) {

            if (!formValidateRef.current[i].value) {

                validateArray.push({ ErrorMsg: formValidateRef.current[i].name + '  is required' });
            }
            else if (formValidateRef.current[i].value) {
                if (formValidateRef.current[i].type === 'checkbox' || formValidateRef.current[i].type === 'radio') {

                    if (formValidateRef.current[i].checked) {
                        checkedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
                    }
                    else {
                        unCheckedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
                    }
                }  

            }
        }


        const checkedDt = [...new Map(checkedList.map((obj) => [obj.ErrorMsg, obj])).values()];
        const unCheckedDt = [...new Map(unCheckedList.map((obj) => [obj.ErrorMsg, obj])).values()];

        const results = unCheckedDt.filter(({ ErrorMsg: unErrorMsg }) => !checkedDt.some(({ ErrorMsg: ckErrorMsg }) => ckErrorMsg === unErrorMsg));


        if (checkedDt.length === 0 && unCheckedDt.length > 0) {
            unCheckedDt.map((data) => {

                validateArray.push({ ErrorMsg: data.ErrorMsg + '  is required' });
            })

        }
        else if (checkedDt.length > 0 && unCheckedDt.length > 0) {

            results.map((data) => {

                validateArray.push({ ErrorMsg: data.ErrorMsg + '  is required' });
            })

        }

        return validateArray;
    }

So Finally We Call This Validation Function On Add Button and And after Validation Of Form ,we Show Data in alert() .
AddBtnFnt()

const AddBtnFnt = () => {

        const isValied = ValidateData();
        if (isValied.length > 0) {

            alert(JSON.stringify(isValied))

        }
        else {
            alert('SuccessFully Added')
        }


    }

Now Finally We Validate Our Form. Final All Code are Below
App.js

import React, { useState } from 'react';
import './App.css';
import React, { useRef, useState } from 'react';

const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];

const DetailsModel = {
    Name: '',
    MobileNo: '',
    EmailAddress: '',
    Gender: '',
    DateOfBirth: '',
    Language: [],
    State: '',
    Country:''
}



const App = () => {

    const [details, setDetails] = useState(DetailsModel);

    const formValidateRef = useRef([]);

    /* Deestructuring Object*/

    const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State, Country } = details;


    const onInputChange = (e) => {

        const { name, value } = e.target;

        if (e.target.type === 'checkbox') {

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
            }
            else {
                const filterData = eval(name).filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

        else {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }

    }

    const ValidateData = () => {
        const validateArray = [];
        const checkedList= [];
        const unCheckedList= [];
        for (let i = 0; i < formValidateRef.current.length; i++) {

            if (!formValidateRef.current[i].value) {

                validateArray.push({ ErrorMsg: formValidateRef.current[i].name + '  is required' });
            }
            else if (formValidateRef.current[i].value) {
                if (formValidateRef.current[i].type === 'checkbox' || formValidateRef.current[i].type === 'radio') {

                    if (formValidateRef.current[i].checked) {
                        checkedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
                    }
                    else {
                        unCheckedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
                    }


                }



            }


        }



        const checkedDt = [...new Map(checkedList.map((obj) => [obj.ErrorMsg, obj])).values()];
        const unCheckedDt = [...new Map(unCheckedList.map((obj) => [obj.ErrorMsg, obj])).values()];

        const results = unCheckedDt.filter(({ ErrorMsg: unErrorMsg }) => !checkedDt.some(({ ErrorMsg: ckErrorMsg }) => ckErrorMsg === unErrorMsg));


        if (checkedDt.length === 0 && unCheckedDt.length > 0) {
            unCheckedDt.map((data) => {

                validateArray.push({ ErrorMsg: data.ErrorMsg + '  is required' });
            })

        }
        else if (checkedDt.length > 0 && unCheckedDt.length > 0) {

            results.map((data) => {

                validateArray.push({ ErrorMsg: data.ErrorMsg + '  is required' });
            })

        }

        return validateArray;
    }



    const AddBtnFnt = () => {

        const isValied = ValidateData();
        if (isValied.length > 0) {

            alert(JSON.stringify(isValied))

        }
        else {
            alert('SuccessFully Added')
        }


    }


    return (

        <>
            <div className='FormValBody'>

                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Name<span className='FormErrorLabelSp'>*</span></label></div>
                    <input ref={(element) => formValidateRef.current[0] = element} type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Mobile No<span className='FormErrorLabelSp'>*</span></label></div>
                    <input ref={(element) => formValidateRef.current[1] = element} type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e) }} /></div>


                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Email Address<span className='FormErrorLabelSp'></span></label></div>
                    <input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Gender<span className='FormErrorLabelSp'>*</span></label></div>
                    <label> Male </label>
                    <input ref={(element) => formValidateRef.current[2] = element} type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e) }} />
                    <label> Female </label>
                    <input ref={(element) => formValidateRef.current[3] = element}  name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'>
                    <div className='labelSeprater'>
                        <label >Date of Birth<span className='FormErrorLabelSp'>*</span></label>
                    </div>
                    <input ref={(element) => formValidateRef.current[4] = element} type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Language<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>Hindi</label>
                    <input ref={(element) => formValidateRef.current[5] = element} type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e) }} />
                    <label>Marathi</label>
                    <input ref={(element) => formValidateRef.current[6] = element}  name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e) }} />
                    <label>English</label>
                    <input ref={(element) => formValidateRef.current[7] = element}  name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e) }} />
                </div>
                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Country<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>India</label>
                    <input ref={(element) => formValidateRef.current[8] = element} type='checkBox' name='Country' value='India' onChange={(e) => { onInputChange(e) }} />
                    <label>Nepal</label>
                    <input ref={(element) => formValidateRef.current[9] = element} name='Country' type='checkBox' value='Nepal' onChange={(e) => { onInputChange(e) }} />
                   </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >State<span className='FormErrorLabelSp'>*</span></label></div>
                    <select ref={(element) => formValidateRef.current[10] = element} name='State' value={State} onChange={(e) => { onInputChange(e) }}>
                        <option value=''>---Select---</option>
                        {StateName.map((sName, index) => (
                            <option key={index + sName} value={sName}>{sName}</option>
                        ))}
                    </select></div>

                <button className='btnAdd' onClick={AddBtnFnt}>Add</button>
            </div>



        </>)
};

export default App;

Well done! Finally Validate Our For And Make A Awesome GUI ! Drop some love by liking or commenting ♥

Reference w3schools

How to Store Multiple CheckBox value in very Simple Step In React ?

Radheshyam Gupta — Sun, 15 Jan 2023 06:46:58 +0000

Go For Live Demo
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.

Hook Which played a big role for developing React Application are useState(),useEffect(),useRef() and More .

In This post i will work on useState() Hook to Save input Data.

Now we Come on Our Topic.

How to Store Multiple CheckBox value in very Simple Step?
First We Create OnInputChange() function,which Store Our Data in State.

const onInputChange = (e) => {

        const { name, value } = e.target;

        if (e.target.type === 'checkbox') {

//it will Store only checked checkBox Value

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
            }

 //it will remove Unchecked checkBox Value
            else {
                const filterData = eval(name).filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

//it will Store only Normal HTML Tag Value
        else {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }

    }

We Can Divide onInputChange () function In Three Part
1) it will Store only Normal HTML Tag Value like radio ,select,input(text,number,date,email).
2) it will Store only checked checkBox Value.
3) it will remove Unchecked checkBox Value.

Now we have final Code for Out React Component With Its Function. StoreMultpleCheckBoxValue.js

import React, { useRef, useState } from 'react';
import './EduBoxLiveGallery.css';

const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];

const DetailsModel = {
    Name: '',
    MobileNo: '',
    EmailAddress: '',
    Gender: '',
    DateOfBirth: '',
    Language: [],
    State: '',
    Country: ''
}



const StoreMultpleCheckBoxValue = () => {

    const [details, setDetails] = useState(DetailsModel);

    const formValidateRef = useRef([]);

    /* Deestructuring Object*/

    const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State, Country } = details;


    const onInputChange = (e) => {

        const { name, value } = e.target;

        if (e.target.type === 'checkbox') {

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
            }
            else {
                const filterData = eval(name).filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

        else {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }

    }



    return (

        <>
            <div className='FormValBody'>

                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Name<span className='FormErrorLabelSp'>*</span></label></div>
                    <input type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Mobile No<span className='FormErrorLabelSp'>*</span></label></div>
                    <input type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e) }} /></div>


                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Email Address<span className='FormErrorLabelSp'></span></label></div>
                    <input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Gender<span className='FormErrorLabelSp'>*</span></label></div>
                    <label> Male </label>
                    <input type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e) }} />
                    <label> Female </label>
                    <input name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e) }} /></div>



                <div className='FormValInputLabelSp'>
                    <div className='labelSeprater'>
                        <label >Date of Birth<span className='FormErrorLabelSp'>*</span></label>
                    </div>
                    <input type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Language<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>Hindi</label>
                    <input type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e) }} />
                    <label>Marathi</label>
                    <input name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e) }} />
                    <label>English</label>
                    <input name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e) }} />
                </div>
                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >Country<span className='FormErrorLabelSp'>*</span></label></div>
                    <label>India</label>
                    <input type='checkBox' name='Country' value='India' onChange={(e) => { onInputChange(e) }} />
                    <label>Nepal</label>
                    <input name='Country' type='checkBox' value='Nepal' onChange={(e) => { onInputChange(e) }} />
                </div>



                <div className='FormValInputLabelSp'><div className='labelSeprater'><label >State<span className='FormErrorLabelSp'>*</span></label></div>
                    <select ref={(element) => formValidateRef.current[10] = element} name='State' value={State} onChange={(e) => { onInputChange(e) }}>
                        <option value=''>---Select---</option>
                        {StateName.map((sName, index) => (
                            <option key={index + sName} value={sName}>{sName}</option>
                        ))}
                    </select></div>

            </div>

            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Mobile No</th>
                        <th>Email Address</th>
                        <th>Gender</th>
                        <th>Date of Birth</th>
                        <th>Language</th>
                        <th>Country</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody>

                    <tr >
                        <td>{Name}</td>
                        <td>{MobileNo}</td>
                        <td>{EmailAddress}</td>
                        <td>{Gender}</td>
                        <td>{DateOfBirth}</td>
                        <td>{Language.toString()}</td>
                        <td>{Country.toString()}</td>
                        <td>{State}</td>

                    </tr>


                </tbody>
            </table>

        </>)
};


export default StoreMultpleCheckBoxValue;

I will Also Share of it's .css File

.FormValBody {
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: azure;
}

    .FormValBody input {       
        padding: 5px 5px 5px 5px;
        border-color: gainsboro;
        outline-color: darkgrey;
        font-family: 'Times New Roman';
        font-size: 18px;
    }
.FormValBody input:active{
    outline-color:blue;
}
.FormValInputLabelSp {
    width: 393px;
    margin-top: 7px;
}
.labelSeprater {
    width: 133px;
    display: inline-block;
}

.FormErrorLabelSp {
    font-family: 'Comic Sans MS';
    font-size: 12px;
    color: red;
}

Well done! Finally Store Multiple ChechBox Data in State !

Drop some love by liking or commenting ♥

Reference w3schools

How to Create A Simple Dual ListBox Component In React?

Radheshyam Gupta — Sun, 18 Dec 2022 10:14:56 +0000

Go For Live Demo
A ListBox Is Simple form component with multi-selection of list items made easy.

First we create two Data Object Array which we used to Show in ListBox Drop-down List.

export const selectOptionOne = [
    {
        Name: 'Krishna',
        value: 'God'
    },
    {
        Name: 'Tiger',
        value: 'Animal'
    },
    {
        Name: 'Ram',
        value: 'Load'
    },
    {
        Name: 'Mountan',
        value: 'Solid'
    },
    {
        Name: 'Tree',
        value: 'Life'
    }

];
export const selectOptionTwo = [
    {
        Name: 'Hanuman',
        value: 'GodLover'
    },
    {
        Name: 'Sita',
        value: 'Goddes'
    },
    {
        Name: 'Laptop',
        value: 'Material'
    },
    {
        Name: 'Shiva',
        value: 'Creater'
    },
    {
        Name: 'Buddha',
        value: 'KnowledgeOfPeace'
    }

];

Now We Design A ListBox and Add its related Function in App.js File .

import { useState } from 'react';
import './App.css';
import { selectOptionOne, selectOptionTwo } from './JsonData';

const App=()=> {


    const [firstSelectList, setFirstSelectList] = useState(selectOptionOne);
    const [secondSelectList, setSecondSelectList] = useState(selectOptionTwo);

    const [temSelectedList, setTemSelectedList] = useState([]);

    const [currentSelectedListNm, setCurrentSelectedListNm] = useState('');

    const handleChange = (e,lstName) => {

        const temp = Array.from(e.target.selectedOptions);
        setTemSelectedList(temp);
        setCurrentSelectedListNm(() => (lstName))
    };


    const moveAllValRight = () => {
        setFirstSelectList([]);
        setSecondSelectList([...firstSelectList, ...secondSelectList]);
 setCurrentSelectedListNm(() => (''));
    };
    const moveAllValLeft = () => {

        setSecondSelectList([]);
        setFirstSelectList([...firstSelectList, ...secondSelectList]);
 setCurrentSelectedListNm(() => (''));

    };


    const moveSelectedValueRight = () => {
        const dataListRight = [];   

        if (temSelectedList !== null && currentSelectedListNm === 'LeftList') {
            let filterList = firstSelectList;
            temSelectedList.map((item) =>

                (filterList = filterList.filter((x) => x.value !== item.value))
            );                       

            setFirstSelectList(filterList);


            temSelectedList.map((item) => {

                dataListRight.push(
                firstSelectList.find((data) => (
                   data.value === item.value
                  ))
                );

            });



            setSecondSelectList([...secondSelectList, ...dataListRight]);

            setTemSelectedList(null);
        }
    };
    const moveSelectedValueLeft = () => {

        const dataListLeft = []; 

        if (temSelectedList !== null && currentSelectedListNm ==='RightList') {
            let filterList = secondSelectList;
            temSelectedList.map(
                (item) => (filterList = filterList.filter((x) => x.value !== item.value))
            );
            setSecondSelectList(filterList);

            temSelectedList.map((item) => {

                dataListLeft.push(
                    secondSelectList.find((data) => (
                        data.value === item.value
                    ))
                );

            });

            setFirstSelectList([...firstSelectList, ...dataListLeft]);
            setTemSelectedList(null);
        }
    };




    return (
        <>
            <div className='select-parent'>
                <div className='SelctDiv'>
                    <select className='select-tag' name="cars" multiple aria-label="label for the select Left" onChange={(e) => {
                        handleChange(e,'LeftList');
                    }}>
                        {firstSelectList.map((data, index) => (

                            < option key={index + data.value} value={data.value} >{data.Name}</option>
                        ))
                        }</select>
                </div>
                <div className='select-btn-div'>
                    <button onClick={() => { moveAllValRight() }}>{`>>`}</button>
                    <button onClick={() => { moveSelectedValueRight() }}>{`>`}</button>
                    <button onClick={() => { moveSelectedValueLeft() }}>{`<`}</button>
                    <button onClick={() => { moveAllValLeft() }}>{`<<`}</button>

                </div>
                <div className='SelctDiv'>
                    <select className='select-tag' name="cars" multiple aria-label="label for the select Right" onChange={(e) => {
                        handleChange(e, 'RightList');
                    }}>
                        {secondSelectList.map((data, index) => (

                            < option key={index + data.value} value={data.value} >{data.Name}</option>
                        ))
                        }
                    </select>
                </div>
            </div>
        </>
    );
}

export default App;

Now Add Style File in App.css

.select-parent{
width:500px;
height:250px;
display:flex;
margin-left: 32%;
margin-top: 69px;
}
.SelctDiv{
    width:40%;
    height:100%;
}

.select-tag {
    width: 100%;
    height: 100%;
}
.select-tag option{
margin:5px;
}
.select-btn-div {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}
.select-btn-div  button{
    margin-bottom:10px;
}

Well done! Finally Create ListBox Component For our React Website !

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How To Add Google Adsense in Our React Website?

Radheshyam Gupta — Sun, 13 Nov 2022 09:41:09 +0000

First We Add given Below AdSense code in our "index.html" File in between the tags like This.
You Get This Code From Your Google AdSense account.

<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
 </head>

*Now, Second We Create AdSense Component,Which We use in the place where we want to show Ads. AdsComponent.js *

import React, { useEffect  } from 'react';

const AdsComponent = (props) => {
    const { dataAdSlot } = props;  



    useEffect(() => {

        try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
        }

        catch (e) {

        }

    },[]);



    return (
        <>
            <ins className="adsbygoogle"
                style={{ display: "block" }}
                data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
                data-ad-slot={dataAdSlot}
                data-ad-format="auto"
                data-full-width-responsive="true">
            </ins>
        </>
    );
};

export default AdsComponent;

And Now Finally time to show our ads in our React Pages Like this.

import './App.css';
import AdsComponent from './AdsComponent';

function App() {

//Note provide dataAdSlot value of your data-ad-slot which is your ad unit no.
    return (
        <>
            <h1>Place To show Google AdSense</h1>
           <AdsComponent dataAdSlot='X7XXXXXX5X' />
        </>

    );
}

export default App;

Well done! Finally Create AdSense Component For our React Website !

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How to Add Form Validation in React ?How to Save CheckBox,Radio Button,Input Field( Text&Date Type),drop-down Value in React?

Radheshyam Gupta — Wed, 26 Oct 2022 09:55:49 +0000

Go For Live Demo
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.

Hook Which played a big role for developing React Application are useState(),useEffect(),useRef() and More .

In This post i will work on useState() Hook to Save input Data.

Now we Come on Our Topic.

*How to Create a Form in React?
it is Design Part only.
*

<div className='FormValBody'>

                <div className='FormValInputLabel'><label>Name</label></div>
                <input type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e,'inputTxt') } } /><br />
                <div className='FormErrorLabel'><label>{NameErrorMsg }</label></div>


                <div className='FormValInputLabel'><label>Mobile No</label></div>
                <input type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{MobNoErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Email Address</label></div>
                <input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{EmailErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Gender</label></div>
                <label> Male </label><input type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e, 'inputTxt') }} />
                <label> Female </label> <input name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{GenderErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Date of Birth</label></div>
                <input type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{DBOErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Language</label></div> 
                <label>Hindi</label><input type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e, 'inputChkBx') }} />
                <label>Marathi</label> <input name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e, 'inputChkBx') }} />
                <label>English</label> <input name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e, 'inputChkBx') }} /><br />
                <div className='FormErrorLabel'><label>{LNGErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>State</label></div>
                <select name='State' value={State} onChange={(e) => { onInputChange(e, 'inputTxt') }}>
                    <option value=''>---Select---</option>
                    {StateName.map((sName, index) => (
                        <option key={index + sName} value={sName}>{sName}</option>
                        ))}
                </select><br />
                <div className='FormErrorLabel'><label>{StateErrorMsg}</label></div>
                <button className='btnAdd' onClick={AddBtnFnt }>Add</button>
            </div>

Now We create react Component for show out input data after our Form Validation has Completed.

import React from 'react';

const ShowMyTable = (props) => {

    const { data } = props;
    return (<>
        <div className='ShowTable'>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Mobile No</th>
                        <th>Email Address</th>
                        <th>Gender</th>
                        <th>Date Of Birth</th>
                        <th>Language</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{data.Name}</td>
                        <td>{data.MobileNo}</td>
                        <td>{data.EmailAddress}</td>
                        <td>{data.Gender}</td>
                        <td>{data.DateOfBirth}</td>
                        <td>{data.Language.toString()}</td>
                        <td>{data.State}</td>
                    </tr>

                </tbody>
            </table>
        </div>

    </>);
};
export default ShowMyTable ;

*Finally We Create React Form and react Component For Show our Validated Data. Now We Create App.css file for Styling Our Form.
*

/*form Validation */

.FormValBody {
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: azure;
}

    .FormValBody input {       
        padding: 5px 5px 5px 5px;
        border-color: gainsboro;
        outline-color: darkgrey;
        font-family: 'Times New Roman';
        font-size: 18px;
    }
.FormValBody input:active{
    outline-color:blue;
}

.FormValInputLabel{
    width:100px;
    float:left;
}
.FormErrorLabel{
    height:17px;
    padding-left:120px;
    font-family:'Comic Sans MS';
    font-size:12px;
    color:red;
}

.btnAdd {
    margin-top:25px;
    margin-bottom:15px;
    margin-left: 38%;
    border: none;
    padding: 10px 20px 10px 20px;
    background-color: ButtonFace;
}
.btnAdd:hover{
    cursor:pointer;
}
.ShowTable {
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: azure;
}
    .ShowTable table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

For Form Validation And Getting input Fields Value ,First We create Model related to our form.
Model For Form

const DetailsModel = {
    Name: '',
    MobileNo: '',
    EmailAddress: '',
    Gender: '',
    DateOfBirth: '',
    Language: [],
    State: ''
}

Model For Validation Message

const ErrorModel = {
    NameErrorMsg: '',
    MobNoErrorMsg: '',
    EmailErrorMsg: '',
    GenderErrorMsg: '',
    DBOErrorMsg: '',
    LNGErrorMsg: '',
    StateErrorMsg: '',

}

*Now we create Pattern For Mobile And Email Address Validate And Create Array of List For Our Drop-Down List. *


const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];


const emailPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;

const  MobNo = /^\d{10}$/;

Next We Take Three State For Storing Input Data,Error Message and Showing Data Component

const [details, setDetails] = useState(DetailsModel);

    const [errorMsg, setErrorMsg] = useState(ErrorModel);

    const [showTable, setShowTable] = useState(<ShowMyTable data={details} />)

*For Easily Access Value Of Our Object Model Key Value, we destructure our Model Object
*

/* Deestructuring Object*/

    const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State } = details;

    const { NameErrorMsg, MobNoErrorMsg, EmailErrorMsg, GenderErrorMsg, DBOErrorMsg, LNGErrorMsg, StateErrorMsg } = errorMsg;

Now We Create a Arrow Function For Update Out Input Field Value State.

const onInputChange = (e, inputType) => {
        const { name, value } = e.target;
        if (inputType === 'inputTxt') {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }
        else if (inputType === 'inputChkBx') {

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...Language, value] }));
            }
            else {
                const filterData = Language.filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

    }

*After Storing This all Form Input fields data in state ,Now Time To validate Form. So We Create New Arrow Function for Validation. *

const ValidateData = () => {
        const validateObj = {};

        if (Name.length === 0) {

            validateObj.NameErrorMsg = 'Please Enter Name';
        }

        if (MobileNo.length === 0) {

            validateObj.MobNoErrorMsg = 'Please Enter Mobile No';
        }
        else if (!MobileNo.match(MobNo)) {

            validateObj.MobNoErrorMsg = 'Please Enter Valid Mobile No';
        }

        if (EmailAddress.length === 0) {

            validateObj.EmailErrorMsg = 'Please Enter Email Address';
        }
        else if (!EmailAddress.match(emailPattern)) {

            validateObj.EmailErrorMsg = 'Please Enter Valid Email Address';
        }

        if (Gender.length === 0) {

            validateObj.GenderErrorMsg = 'Please Select Gender';
        }
        if (DateOfBirth.length === 0) {

            validateObj.DBOErrorMsg = 'Please Enter Date of Birth';
        }

        if (DateOfBirth.length === 0) {

            validateObj.DBOErrorMsg = 'Please Enter Date of Birth';
        }

        if (Language.length === 0) {

            validateObj.LNGErrorMsg = 'Please Select Language';
        }
        if (State.length === 0) {

            validateObj.StateErrorMsg = 'Please Select State';
        }


        if (Object.keys(validateObj).length === 0) {
            setErrorMsg(() => (ErrorModel));
            return true;
        }
        else {

            setErrorMsg(() => ({ ...ErrorModel, ...validateObj }));
            return false;

        }


    }

So Finally We Call This Validation Function On Add Button and And after Validation Of Data ,we Show Data in Component Which we Create .

const AddBtnFnt = () => {

        const validateRt = ValidateData();

        if (validateRt) {
            setShowTable(<ShowMyTable data={details} />);
        }


    }

Now Finally We Validate Our Form. Final All Code are Below

import React, { useState } from 'react';
import './App.css';
import ShowMyTable from'./ShowMyTable';

const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];

const DetailsModel = {
    Name: '',
    MobileNo: '',
    EmailAddress: '',
    Gender: '',
    DateOfBirth: '',
    Language: [],
    State: ''
}

const ErrorModel = {
    NameErrorMsg: '',
    MobNoErrorMsg: '',
    EmailErrorMsg: '',
    GenderErrorMsg: '',
    DBOErrorMsg: '',
    LNGErrorMsg: '',
    StateErrorMsg: '',

}

const emailPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
const  MobNo = /^\d{10}$/;



const FormValidationInReact = () => {

    const [details, setDetails] = useState(DetailsModel);

    const [errorMsg, setErrorMsg] = useState(ErrorModel);

    const [showTable, setShowTable] = useState(<ShowMyTable data={details} />)

    /* Deestructuring Object*/

    const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State } = details;

    const { NameErrorMsg, MobNoErrorMsg, EmailErrorMsg, GenderErrorMsg, DBOErrorMsg, LNGErrorMsg, StateErrorMsg } = errorMsg;

    const onInputChange = (e, inputType) => {
        const { name, value } = e.target;
        if (inputType === 'inputTxt') {

            setDetails((previous) => ({ ...previous, [name]: value }))

        }
        else if (inputType === 'inputChkBx') {

            if (e.target.checked) {

                setDetails((previous) => ({ ...previous, [name]: [...Language, value] }));
            }
            else {
                const filterData = Language.filter((lang) => { return lang !== value });

                setDetails((previous) => ({ ...previous, [name]: filterData }));
            }
        }

    }


    const ValidateData = () => {
        const validateObj = {};

        if (Name.length === 0) {

            validateObj.NameErrorMsg = 'Please Enter Name';
        }

        if (MobileNo.length === 0) {

            validateObj.MobNoErrorMsg = 'Please Enter Mobile No';
        }
        else if (!MobileNo.match(MobNo)) {

            validateObj.MobNoErrorMsg = 'Please Enter Valid Mobile No';
        }

        if (EmailAddress.length === 0) {

            validateObj.EmailErrorMsg = 'Please Enter Email Address';
        }
        else if (!EmailAddress.match(emailPattern)) {

            validateObj.EmailErrorMsg = 'Please Enter Valid Email Address';
        }

        if (Gender.length === 0) {

            validateObj.GenderErrorMsg = 'Please Select Gender';
        }
        if (DateOfBirth.length === 0) {

            validateObj.DBOErrorMsg = 'Please Enter Date of Birth';
        }

        if (DateOfBirth.length === 0) {

            validateObj.DBOErrorMsg = 'Please Enter Date of Birth';
        }

        if (Language.length === 0) {

            validateObj.LNGErrorMsg = 'Please Select Language';
        }
        if (State.length === 0) {

            validateObj.StateErrorMsg = 'Please Select State';
        }


        if (Object.keys(validateObj).length === 0) {
            setErrorMsg(() => (ErrorModel));
            return true;
        }
        else {

            setErrorMsg(() => ({ ...ErrorModel, ...validateObj }));
            return false;

        }


    }


    const AddBtnFnt = () => {

        const validateRt = ValidateData();

        if (validateRt) {
            setShowTable(<ShowMyTable data={details} />);
        }


    }


    return (

        <>
            <div className='FormValBody'>

                <div className='FormValInputLabel'><label>Name</label></div>
                <input type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e,'inputTxt') } } /><br />
                <div className='FormErrorLabel'><label>{NameErrorMsg }</label></div>


                <div className='FormValInputLabel'><label>Mobile No</label></div>
                <input type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{MobNoErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Email Address</label></div>
                <input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{EmailErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Gender</label></div>
                <label> Male </label><input type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e, 'inputTxt') }} />
                <label> Female </label> <input name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{GenderErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Date of Birth</label></div>
                <input type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e, 'inputTxt') }} /><br />
                <div className='FormErrorLabel'><label>{DBOErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>Language</label></div> 
                <label>Hindi</label><input type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e, 'inputChkBx') }} />
                <label>Marathi</label> <input name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e, 'inputChkBx') }} />
                <label>English</label> <input name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e, 'inputChkBx') }} /><br />
                <div className='FormErrorLabel'><label>{LNGErrorMsg}</label></div>


                <div className='FormValInputLabel'><label>State</label></div>
                <select name='State' value={State} onChange={(e) => { onInputChange(e, 'inputTxt') }}>
                    <option value=''>---Select---</option>
                    {StateName.map((sName, index) => (
                        <option key={index + sName} value={sName}>{sName}</option>
                        ))}
                </select><br />
                <div className='FormErrorLabel'><label>{StateErrorMsg}</label></div>
                <button className='btnAdd' onClick={AddBtnFnt }>Add</button>
            </div>

            {showTable }

        </>)
};


export default FormValidationInReact;

Well done! Finally Validate Our For And Make A Awesome GUI !

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How To Customize HTML video Tag controls attribute in React js using useRef() and useState() Hook ?

Radheshyam Gupta — Sun, 16 Oct 2022 06:45:58 +0000

Go For Live Demo
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.

Hook Which played a big role for developing React Application are useState(),useEffect(),useRef().

Now we Come on Our Topic.

First We Know that ,1)How to Play video Through custom Bottom In React Js?

const videoPlay = () => {
        videoRef.current.play();
        setDurationOfVideo(videoRef.current.duration);
        getDurationOfVideo();

    }

2)How to paused video Through custom Bottom In React Js?

const videoStop = () => {

        videoRef.current.pause();
    }

3)How to Replay video Through custom Bottom In React Js?

const videoReplay= () => {
        setDurationOfVideo(videoRef.current.duration);
        videoRef.current.currentTime = 0;
        videoRef.current.play();

        getDurationOfVideo();
    }

4)How to Show video Progress Bar Control In React Js?

 const getDurationOfVideo = () => {

        const videoIntervalTime = setInterval(() => {

            setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime));

            if (parseFloat(videoRef.current.currentTime) >= durationOfVideo)
            {

                clearVideoInterval();
            }

        }, 1000)



        const clearVideoInterval = () => {
            clearInterval(videoIntervalTime);
        }

    }

5)How to Control playbackRate Property of video Tag In React Js?

const setVideoSpeed = (e) => {

        videoRef.current.playbackRate = parseFloat(e.target.value);
    }

6)How to Control video tag Progress Bar Control In React Js?


const videoDuration = (e) => {

        setCurrentDurationOfVideo(parseFloat(e.target.value));
        videoRef.current.currentTime = parseFloat(e.target.value);
    }

Now Second We Know that ,1)How to Control video Audio volume Through custom Progress Bar In React Js?

const volumebar = (e) => {

        const valumValue = parseFloat(e.target.value) / 100;

        setVolumOfVideo(e.target.value);

        videoRef.current.volume = valumValue.toFixed(1);

    }

2)How to Mute video tag Audio In React Js?

const videoMute = () => {

        videoRef.current.muted = true;
    }

3)How to UnMute video tag Audio In React Js?

const videoUnMute = () => {

        videoRef.current.muted = false;
    }

*Now Finally We Control All required HTMl Video Tag controls attribute in React js. Final Code are Below.
1) app.css File
*

.customVideoTagClass {
    width: 450px;
    height: 300px;
    border: 2px solid black;
    margin: 70px 0px 0px 20%;
    border-radius:5px;
    float:left;
}
.customVideoTagClass video{
    height:inherit;
    width:inherit;
}

.customVideoTagControlsClass {
    width: 450px;
    height: 300px;
    margin: 70px 0px 0px 10px;
    border: 1px solid black;
    border-radius: 5px;
    float: left;
}
    .customVideoTagControlsClass button{
        border:1px solid orange;
        border-radius:2px;
        padding:5px;
        margin:10px 0px 1px 15px;
        width:70px;
        background-color:coral;
        cursor:pointer;
    }
    .customVideoTagControlsClass input[type=range] {
        width: 377px;
    }

2> App.js File

import React, { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {

    const [volumOfVideo, setVolumOfVideo] = useState(100);
    const [durationOfVideo, setDurationOfVideo] = useState(0);
    const [currentDurationOfVideo, setCurrentDurationOfVideo] = useState(0);

    const videoRef = useRef();

    const getDurationOfVideo = () => {

        const videoIntervalTime = setInterval(() => {

            setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime));

            if (parseFloat(videoRef.current.currentTime) >= durationOfVideo)
            {

                clearVideoInterval();
            }

        }, 1000)



        const clearVideoInterval = () => {
            clearInterval(videoIntervalTime);
        }

    }

    const volumebar = (e) => {

        const valumValue = parseFloat(e.target.value) / 100;

        setVolumOfVideo(e.target.value);

        videoRef.current.volume = valumValue.toFixed(1);

    }

    const videoPlay = () => {
        videoRef.current.play();
        setDurationOfVideo(videoRef.current.duration);
        getDurationOfVideo();

    }

    const videoStop = () => {

        videoRef.current.pause();
    }

    const videoReplay= () => {
        setDurationOfVideo(videoRef.current.duration);
        videoRef.current.currentTime = 0;
        videoRef.current.play();

        getDurationOfVideo();
    }

    const videoMute = () => {

        videoRef.current.muted = true;
    }

    const videoUnMute = () => {

        videoRef.current.muted = false;
    }

    const setVideoSpeed = (e) => {

        videoRef.current.playbackRate = parseFloat(e.target.value);
    }

    const videoDuration = (e) => {

        setCurrentDurationOfVideo(parseFloat(e.target.value));
        videoRef.current.currentTime = parseFloat(e.target.value);
    }



    return (
        <> <h1 style={{ textAlign: 'center' }}>The Customize video controls attribute</h1>
            <div className='customVideoTagClass'>

                <video ref={videoRef} preload='auto'>
                    <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'></source>
                </video>
            </div>
            <div className='customVideoTagControlsClass'>
                <button onClick={videoPlay}>Play</button>
                <label>playback speed</label>
                <select onChange={ setVideoSpeed}>
                    <option value={1.0}>normal speed</option>
                    <option value={0.5}>slower</option>
                    <option value={2.0}>faster speed</option>
                </select><br />
                <button onClick={videoStop} >Stop</button><br />
                <button onClick={videoReplay}>Repaly</button><br />
                <button onClick={videoMute}>Mute</button><br />
                <button onClick={videoUnMute}>Unmute</button><br />
                <label><b>volume</b></label><input type='range' min="0" max="100" step='10' value={volumOfVideo} onChange={volumebar} /><br /><br />
                <label><b>Scrubbing Video</b></label><input type='range' min="0" max={durationOfVideo} value={currentDurationOfVideo} onChange={videoDuration} />
            </div>
        </>
    );
}

export default App;

Well done! Finally Control And Make A GUI For Video Tag!

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How to handle multiple Same inputs box in React for Bulk Data Insert With Use of useRef Hook?

Radheshyam Gupta — Sat, 08 Oct 2022 09:16:48 +0000

How to get Custom attributes value in React With Use of useRef Hook ?
How to Change Input Box defaultValue In React Js using useRef() Hook ?

In this Post, we will learn about how to handle multiple input Box defaultValue using useRef() React Hook.

1)onInputChange() Function

const onInputChange = (e) => {

        ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value;


    }

How to get All Input Box Value and Store in Array ?

1)ShowValue() Function

const ShowValue = () => {

        const myInputValue = [];
        for (let i = 0; i < ref.current.length; i++) {

            myInputValue.push({
                [ref.current[i].name]: ref.current[i].value
            })

        }
        console.log(myInputValue);
    }

How to Clear All Input Box Value ?

1)ClearValue() Function

const ClearValue = () => {

        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].value = 0;
        }

    }

Finally We Completed our Requirement

1)App.js

import './App.css';
import React, { useRef } from 'react';

function App() {

    const ref = useRef([]);

    const onInputChange = (e) => {

        ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value;


    }

    const ShowValue = () => {

        const myInputValue = [];
        for (let i = 0; i < ref.current.length; i++) {

            myInputValue.push({
                [ref.current[i].name]: ref.current[i].value
            })

        }
        console.log(myInputValue);
    }
    const ClearValue = () => {

        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].value = 0;
        }

    }


  return (
      <>
          <div style={{ width: '50%', backgroundColor: '#f7f4f3', marginLeft: '150px', marginTop: '100px', padding: '50px 0px 100px 50px' }}>
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[0] = element }} refindex={0} name='ModeyValue' defaultValue='123464' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[1] = element }} refindex={1} name='ModeyValue' defaultValue='123' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[2] = element }} refindex={2} name='ModeyValue' defaultValue='1' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[3] = element }} refindex={3} name='ModeyValue' defaultValue='1234' type='text' onChange={onInputChange} /> <br />

              <button style={{ padding: '5px', backgroundColor: 'green', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ShowValue}>Check All Input Value in Form of Array</button>

              <button style={{ padding: '5px', backgroundColor: 'red', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ClearValue}>Clear all Input Value</button>
          </div>
      </>
  );
}

export default App;

Well done! Finally We Store All InputBox Value in Array!

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

How do I check/uncheck all checkboxes with a button In React Js using useRef() Hook ?

Radheshyam Gupta — Sun, 02 Oct 2022 07:38:17 +0000

How do I check/unchecked all checkboxes with a button In React Js using useRef() Hook ?

In this Post, we will learn about how check/unchecked all checkboxes
using useRef() React Hook.

1>App.js

import logo from './logo.svg';
import './App.css';

import { useRef } from 'react';

function App() {

    const ref = useRef([]);

    const checkboxvalue = (e) => {
        console.log(e.target.value)
    }

    const Unchecked = () => {

        console.log(ref.current.length)
        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].checked = false;
        }

    }
    const Checked = () => {

        console.log(ref.current.length)
        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].checked = true;
        }

    }

    return (
        <>
            <div style={{ width: '50%', backgroundColor: '#f7f4f3', marginLeft: '150px', marginTop: '100px', padding:'50px 0px 100px 50px' }}>
            <input ref={(element) => { ref.current[0] = element }} value='12' type='checkBox' onChange={checkboxvalue } /> <br />
            <input ref={(element) => { ref.current[1] = element }} value='123' type='checkBox'  onChange={checkboxvalue } /> <br />
            <input ref={(element) => { ref.current[2] = element }} value='1' type='checkBox'    onChange={ checkboxvalue } /> <br />
            <input ref={(element) => { ref.current[3] = element }} value='1234' type='checkBox' onChange={checkboxvalue } /> <br />

            <button style={{ padding: '5px', backgroundColor: 'green', border: 'none', margin:'5px 5px 5px 5px' }}onClick={Unchecked}>Unchecked</button>

            <button style={{ padding: '5px', backgroundColor: 'red', border: 'none', margin: '5px 5px 5px 5px' }} onClick={Checked}>Checked</button>
            </div> 
        </>
);
}

export default App;

Well done! You now have Done this using useRef() React Hook !

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository