lundi 7 février 2022

How to push all the selected values of checkbox in an array in React-Bootstrap

I am using a react-bootstrap component Checkbox to create a general form . The component name is AdminPage, I wanted tp pass all the selected values of the checkboxes into an state (which is initialised as a state ). I am unable to do so.

Here below is the code


import React, { useState } from "react";
import { Button, Row, Col, Dropdown, Form } from "react-bootstrap";


export const AdminPage = () => {

const [name, setName] = useState('');
const [operations, setOperation] = useState([]);

const handleSubmit = () => {
  alert("Selected Checkboxes -" + operations);
}

return (
                <>
                    <div className="p-3 border border-dark bg-light ">
                        <h3 className="text-center">Add Roles Here</h3>
                        <Form className="p-3">
                            <Form.Group as={Row} className="mb-3" controlId="formBasicText">
                                <Form.Label column sm="3">
                                    Name
                                </Form.Label>
                                <Col sm="9">
                                    <Form.Control type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter Name here..." />
                                </Col>
                            </Form.Group>
                            <Form.Group as={Row} className="mb-3" controlId="formBasicText">
                                <Form.Label column sm="3">
                                    Opeations
                                </Form.Label>
                                {/* <Col sm="9">
                                    <Form.Control type="text" value={rolecredentials.operations} onChange={(e) => onChange(e, "operations")} placeholder='Eg: GETitems, GETstocks, GETpinfences, GETinventory, ADDinventory' />
                                    <Form.Text className="text-muted mx-2">
                                        Mention multiple values using comma seperator like given in placeholder
                                    </Form.Text>
                                </Col> */}
                                <Col sm="8">
                                    <Form value={operations} >
                                    <div key={`inline-checkbox`} className="mb-3">
                                        <Form.Check
                                            inline
                                            label="GETitem"
                                            name="group1"
                                            type="checkbox"
                                            value="GETitem"
                                            
                                            id={`inline-checkbox-1`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETstocks"
                                            name="group1"
                                            type="checkbox"
                                            value="GETstocks"
                                            
                                            id={`inline-checkbox-2`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETpinfences"
                                            name="group1"
                                            type="checkbox"
                                            value="GETpinfences"
                                            
                                            id={`inline-checkbox-3`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETinventory"
                                            name="group1"
                                            type="checkbox"
                                            value="GETinventory"
                                            
                                            id={`inline-checkbox-4`}
                                        />
                                        <Form.Check
                                            inline
                                            label="ADDinventory"
                                            name="group1"
                                            type="checkbox"
                                            value="ADDinventory"
                                          
                                            id={`inline-checkbox-5`}
                                        />
                                    </div>
                                    </Form>
                                </Col>
                            </Form.Group>
                            
                            <div className="w-25 m-auto mt-5 mb-3">
                                <Button variant="primary" type="submit" onClick={handleSubmit}>
                                    Add Role
                                </Button>
                            </div>
                        </Form>
                    </div>
                </>
            )
}

I had tried onSelect but still not able to do so.




Aucun commentaire:

Enregistrer un commentaire