How to pass checked array data in react js?

import React, { useState } from 'react';
import { Card, Row, Col, Form } from 'react-bootstrap';
import { Link } from 'react-router-dom';

function Test() {

    const [fruitArray, setFruitArray] = useState([]);

    const handleChange = (e) => {
        const value = e.target.value;
        const checked = e.target.checked;
        console.log(value, checked);
        if (checked) {
            setFruitArray([
                ...fruitArray, value
            ])
        } else {
            setFruitArray(fruitArray.filter((e) => (e !== value)));
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault();

        console.log(fruitArray);
    }

    return (
        <>
            <div>
                <Card>
                    <Card.Header>
                        <h3 className="card-title">Add Property</h3>
                    </Card.Header>
                    <Card.Body>
                        <Row>
                            <Col md={6}>
                                <Form onSubmit={handleSubmit}>
                                    <Form.Label>Fruits</Form.Label>
                                    <div className="mb-3">
                                        <Form.Check
                                            inline
                                            label="Apple"
                                            name="group1"
                                            type="checkbox"
                                            id="inline1"
                                            value="Apple"
                                            onChange={handleChange}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Form.Check
                                            inline
                                            label="Mango"
                                            name="group2"
                                            type="checkbox"
                                            id="inline2"
                                            value="Mango"
                                            onChange={handleChange}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Form.Check
                                            inline
                                            label="Banana"
                                            name="group3"
                                            type="checkbox"
                                            id="inline3"
                                            value="Banana"
                                            onChange={handleChange}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Form.Check
                                            inline
                                            label="Grapes"
                                            name="group4"
                                            type="checkbox"
                                            id="inline4"
                                            value="Grapes"
                                            onChange={handleChange}
                                        />
                                    </div>
                                    <button className="btn btn-outline-primary">Submit</button>
                                </Form>
                            </Col>
                        </Row>
                    </Card.Body>
                </Card>
            </div>
        </>
    )
}

export default Test

 

Location: India

Comments

Post a Comment

Popular posts from this blog

Create a Connection in Node js and make an API

server.js import express from "express" ; import mongoose from "mongoose" ; import bodyParser from "body-parser" ; import dotenv from 'dotenv' ; import router from "./routes/index.js" ; import cors from "cors" ; dotenv . config (); const app = express (); app . use ( cors ({     origin : '*' , })) app . use ( bodyParser . json ()); app . use ( express . static ( 'public' )); app . use ( '/media' , express . static ( 'media' )); mongoose . connect ( process . env . MONGO_URI , {     useNewUrlParser : true ,     useUnifiedTopology : true , }). then (() => {     console . log ( 'Connected to MongoDB' ); }). catch (( error ) => {     console . error ( 'MongoDB connection error:' , error ); }); app . use ( '/api' , router ); app . get ( '/' , ( req , res ) => {     res . send ( 'Hello, API!' ); }); const PORT = process . env . ...
Read more

React JS | Store form data in localStorage

 Register.jsx import React , { useState } from 'react' ; import { Link , useNavigate } from 'react-router-dom' ; export default function Register () {   const [ user , setUser ] = useState ({     name : "" ,     email : "" ,     password : ""   });   const navigate = useNavigate ();   const handleSubmit = ( e ) => {     e . preventDefault ();     const formData = {       name : user . name ,       email : user . email ,       password : user . password     };     localStorage . setItem ( "userData" , JSON . stringify ( formData ));     navigate ( "/login" );   }   return (     <>       < section className = 'container w-25' >         < div className = "card my-5" >           < div className = "card-header" > ...
Read more

React Redux Toolkit

  1. Install Redux Toolkit and React-Redux: npm install @reduxjs/toolkit react-redux 2. Create a Redux Store: import { configureStore } from "@reduxjs/toolkit" ; import counterReducer from "./slices/counterSlice" ; // Import your slice export const store = configureStore ({   reducer : {     counter : counterReducer , // Add your reducers here   }, }); export default store ; 3. Create a Slice:  import { createSlice } from "@reduxjs/toolkit" ; const initialState = {   count : 0 , }; const counterSlice = createSlice ({   name : "counter" ,   initialState ,   reducers : {     increment : ( state ) => {       state . count += 1 ;     },     decrement : ( state ) => {       state . count -= 1 ;     },     incrementByAmount : ( state , action ) => {       state . count += action . payload ;  ...
Read more