I have tried a lot but the react Check box checked is not working properly.There may be a common mistake That I am unable to figure out.I am trying to change the state of the react checkbox by using use state and changing the checked by of isAdmin by sending a boolean value to it but it is not working.

Pls Help !!!!!

Here is the Edit Screen where the checkbox is present.

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Form, Button,} from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import Message from '../components/Message';
import Loader from '../components/Loader';
import { getUserDetails } from '../actions/userActions';
import FormContainer from '../components/FormContainer';

const UserEditScreen = ({ match, history }) => {

  const userId = match.params.id

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const  [isAdmin,setIsAdmin] = useState(false);

  const dispatch = useDispatch();

  const userDetails = useSelector((state) => state.userDetails);
  const { loading, error, user } = userDetails;

  useEffect(()=>{
      if(!user.name || user._id !==userId){
          dispatch(getUserDetails(userId))
      }else{
          setName(user.name)
          setEmail(user.email)
          setIsAdmin(user.isAdmin)
      }
  }, [dispatch,userId,user])

  const submitHandler = (e) => {
    e.preventDefault()
   
  }
  return (
      <>
          <Link to = '/admin/userlist' className='btn btn-dark my-3'>
              Go Back
          </Link>


          <FormContainer>
      <h1>Edit User</h1>
      {/* {message && <Message variant='danger'>{message}</Message>}
      {error && <Message variant='danger'>{error}</Message>}

      {loading && <Loader />} */}

{loading ? <Loader />: error ? <Message variant='danger'>{error}</Message> :(

<Form onSubmit={submitHandler}>
<Form.Group controlId='name'>
  <Form.Label>Enter Name</Form.Label>
  <Form.Control
    type='text'
    placeholder='Enter Name'
    value={name}
    onChange={(e) => {
      setName(e.target.value);
    }}
  ></Form.Control>
</Form.Group>

<Form.Group controlId='email'>
  <Form.Label>Email Address</Form.Label>
  <Form.Control
    type='email'
    placeholder='Enter Email'
    value={email}
    onChange={(e) => {
      setEmail(e.target.value);
    }}
  ></Form.Control>
</Form.Group>

<Form.Group className='py-3' controlId='isadmin' >
  <Form.Check
    label='If Admin then Check'
    id='useradmin'
    type='checkbox'
    checked={isAdmin}
    
     onChange={(e) => {
      setIsAdmin(e.target.checked); }}
  ></Form.Check>
</Form.Group>



<Button className='py-3' type='submit' variant='primary'>
  Update
</Button>
</Form>

)}  
    </FormContainer>
      </>
    
  );
};

export default UserEditScreen;

CodePudding user response：

There's a slight change required in your onChange handler

Current way

onChange={(e) => {setIsAdmin(e.target.checked); }}

Correct way

onChange={(e) => {setIsAdmin(e.target.value); }}

Here, e is the event, which in this case is change, target is the element that triggered the event, which in this case is the Form.check, and value is the value of the element. Thus you have to set your state (in this case isAdmin) with the value of that element.

CodePudding user response：

You can also consider code like this.

onChange={() => {
  setIsAdmin((prev) => !prev);
}}