I am trying to implement a checklist. Before populating the checklist a request is sent to the server to know the status of the user. The data received by the server will be of the form {Name: true, Place: false, Animal: true, Thing: false}. For every true, the checkbox will be ticked, and false it will be not.

When response.data.category is received as {Name: true, Place: false, Animal: true, Thing: false} i get the checklist box as

When I click on the Update category button the onSubmitHandler function fires and in the console, I get {Name: true, Place: false, Animal: true, Thing: false}

but when I try to modify it like in this case:

Now when i have made some custome changes and I click on the Update category button the onSubmitHandler function fires and in the console, I get {Name: true, Place: true, Animal: true, Thing: true} instead of {Name: false, Place: true, Animal: false, Thing: true}.

Here is the code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Form, Button } from 'react-bootstrap';
import './Checklist.css';

const Checklist = (props) => {
    
    const [name, setName] = useState(null);
    const [place, setPlace] = useState(null);
    const [animal, setAnimal] = useState(null);
    const [thing, setThing] = useState( null);
    


    useEffect(()=>{
        axios.get('http://localhost:8080/feeds/category')
            .then(response=>{
               
                console.log("Inside");
                setName(response.data.category.Name);
                setPlace(response.data.category.Place);
                setAnimal(response.data.category.Animal);
                setThing(response.data.category.Thing);
            
            })
            .catch(err=>{
                console.log(err);
            })
    },[])
    
    
    const onSubmitHandler = () => {
        console.log("Name: "   name   " Place: "   place   " Animal: "   animal   " Thing: "   thing);
    }




    return (
        <div className='Parent'>
            <h3 className='Text'>Select the sites for which you want to receive notification</h3>
            <Form className='Lists'>

                <div className='ListParent'>
                    <div>Name</div>
                    <Form.Check aria-label="option 1" defaultChecked={name} onChange={e => setName(!name)} />

                </div>

                <div className='ListParent'>
                    <div>Place</div>
                    <Form.Check aria-label="option 1"  defaultChecked={place} onChange={e => setPlace(!place)} />
                </div>

                <div className='ListParent'>
                    <div>Animal</div>
                    <Form.Check aria-label="option 1" defaultChecked={animal} onChange={e => setAnimal(!animal)} />

                </div>

                <div className='ListParent'>
                    <div>Thing</div>
                    <Form.Check aria-label="option 1" defaultChecked={thing} onChange={e => setThing(!thing)} />

                </div>



            </Form>
            <Button variant="primary" className='ListButton'
                onClick={onSubmitHandler}>Update Categories</Button>
        </div>

    )
}

export default Checklist;

Please guide me how to change the states properly also let me know if more information is needed.

CodePudding user response：

The defaultChecked prop is only used during initial render. Use checked instead

E.g. checked={Thing}