0

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.

Improve this question

1 Answer 1

Reset to default
1

Have you given the :checked pseudo selector a try?

const checkedElements = document.querySelectorAll(":checked");

Edit

Oh, and the event you're looking for is onChange.

Edit*

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

  const checkedElements = documents.querySelectorAll(":checked");
  

  checkedElements.forEach((entry) => {
    /*Here we have access to each checked element.
     *So maybe define an array, push each value you want to that array
     *and finally update the state after the forEach.
     */
  });
}
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Can you share how to do so by my code?
I've edited my original answer. I don't know what type you have in your array, I assume it's a boolean? In that case just define a new array, add true for each iteration and finally update the state.
No the values in the array should be string. Like after selecting first & second checkbox, it should be like, operation = ["GETitems", "GETstockpoints"] .
Have a look at this proof of concept: codesandbox.io/s/rough-rain-11hcr?file=/src/App.js
But it is showing that you can not read forEach property of null , since selectedValues is [] initially
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.