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

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

EduBoxLiveGallery.css

.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;
}