onChange Event not Triggered in React JS

Question

export default function ActionRolesPage(props) {
      const [authorities, setAuthorities] = useState([]);
      const [name, setName] = useState("");
      let list = [];
      useEffect(() => {
        getAuthorities();
      }, []);
      const getAuthorities = () => {
        doGetAllAuthorities()
          .then((res) => {
            getValidatedData(res.data, "array").map((data) => (
              list.push({ authority: data})
            ))
            setAuthorities(list);
          }).catch((e) => {
            console.log(e);
          })
      }
      const handleChange = (e) => {
        console.log(e);
        const { name, checked } = e.target
        console.log(name,checked);
        let tempUser = authorities.map((user) => (
          user.authority === name ? { ...user, isChecked: checked } : user
        ));
        setAuthorities(tempUser);
      }
    
      if(authorities.length){
        console.log(authorities);
      }
    
      
      return (
        <React.Fragment>
          <Suspense fallback={<div>Loading....</div>}>
            <div className="page-content">
              <MetaTags>
                <title>Add Role | IG One</title>
              </MetaTags>
              <Container fluid>
                <Breadcrumb
                  title="Add Role"
                  breadcrumbItems={[{ title: "Settings" }, { title: "Roles" }, { title: "Add" }]}
                />
                <Form onSubmit={handleSubmit}>
                  <Card>
                    <CardBody>
                      <Row className="mb-3">
                        <label
                          htmlFor="example-text-input"
                          className="col-md-2 col-form-label"
                        >
                          Name
                        </label>
                        <div className="col-md-8 mx-0">
                          <Input
                            className="form-control"
                            type="text"
                            name="name"
                            required
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Name Of User "
                          />
                        </div>
                      </Row>
                      <br></br>
                      <br></br>
                      <Row className="mb-3">
                        <CardTitle>
                          Authorities
                        </CardTitle>
                        <div className="col-md-2">
    
                          {
                           
                              authorities.map((data,index) => (
                                <>
                                  <div key={index} style={{ display: "flex" }}>
                                    <div className='col-md-10 mx-0 mt-2'>
                                      <Input type={"checkbox"}
                                        checked={data?.isChecked || false}
                                        name={data.authority}
                                        onChange={(e) => console.log(e)}
                                        className="form-control"
                                        style={{ cursor: "pointer", paddingLeft: "1rem" }}
                                      /></div>
                                    <div>
                                      <label style={{ cursor: "pointer" }} htmlFor={data.authority} className="col-md-50 col-form-label"> {data.authority}</label>
                                    </div>
                                  </div>
                                </>
                              )) 
                          }
                        </div>
                      </Row>
                      <Row className="d-flex justify-content-center mt-4">
                        <Button color="dark" type='submit' className="btn-xs" style={{ width: "40%", cursor: "pointer" }}
                        >
                          Add Role
                        </Button>
                      </Row>
                    </CardBody>
                  </Card>
                </Form>
              </Container>
            </div>
          </Suspense>
        </React.Fragment>
      )
    } 

Here is the whole code. I want to handle multiple checkboxes but onChange Event not triggered. There is a function handleChange it calls when onChange triggered but in my case there is no error seen in console as well as not display any event at console please resolve my doubt.

I also need to update the form getting respose from backend is checked authority name array How to handle checked state in checkbox.

Answer 1

If you have created a custom component for input , pass your onChange handler as prop and call inside the component as onChage event of <input> field. Or if you used any third-party lib, then you just need to pass a callback as prop. Otherwise Try this: <input> instead of <Input >

<input type={"checkbox"}
       checked={data?.isChecked || false}
       name={data.authority}
       onChange={(e) => console.log(e)}
       className="form-control"
       style={{ cursor: "pointer", paddingLeft: "1rem" }}
     />