Why the states are not changing as required?

Question

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.

Answer 1

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

E.g. checked={Thing}