How to set defaultChecked getting value from state React Functional Component Checkbox (React - Hooks)

Question

I have api call which jobdetail object that has status value equal to 1

  const [jobdetail, setJobdetail] = useState([]);

  React.useEffect(() => {
     const getJobDetail = async () => {
      try {
         const resDataService = await DataService.jobinfo_detail(id)
         setJobdetail(resDataService);
     } catch (error) {
      console.log(error);
      }
   };
  getJobDetail();
}, []);

  React.useEffect(() => {
    reset(jobdetail);
  }, [jobdetail]);

json format return from api call will be like this:

   {
     "id": 13,
     "client_name": "Pasir Ris - Punggol Town Council",
     "client_id": null,
      "division_name": "Pasir Ris East",
     "block": "12",
     "dateEntry": "14-04-2022",
     "natureofcomplain": "sample complaine",
     "address": "pasir ris east",
     "gtotal": "1080.0",
     "status": 1, // value is one
     "photo_url": "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--70d8263aa1309bd12684731214cc57fb82a654fd/download.jpeg",
"defect_details": [
    {
        "id": 16,
        "uid": 16,
        "defects": "defects sample",
        "recommendation": "recommendation sample"
    }
],
"partsreplaces": [
    {
        "id": 19,
        "uid": 19,
        "jobinfo_id": 13,
        "sorcode": "asd1",
        "item": "pipe",
        "quantity": 12,
        "rates": "90.0",
        "subtotal": "1080.0"
    }
  ]
 }

this is my checkbox tags

   <Checkbox
          colorScheme="green" 
          size="lg"
          {...register("status")}
          onChange={(e) =>
          setValues({ ...values, status: e.target.value })
           }  
          defaultChecked = {jobdetail.status === 1 ? true : false} // this part checkbox is not checked where the jobdetail.status is 1 
     />

when i console.log(jobdetail.status) it return 1 that is why I'm confused why defaultChecked is not working. Hope someone can help me. Thanks

Answer 1

The defaultChecked prop is used when the component mounts, and shouldn't ever change during life of the component.

Solutions

• Keep the input uncontrolled, wait to mount the checkbox input until the initial data is loaded.

  const [jobdetail, setJobdetail] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);
  
  React.useEffect(() => {
    const getJobDetail = async () => {
      try {
        const resDataService = await DataService.jobinfo_detail(id);
        setJobdetail(resDataService);
      } catch (error) {
        console.log(error);
      } finally {
        setDataLoaded(true);
      }
    };
  
    getJobDetail();
  }, []);
  
  ...
  
  {dataLoaded && (
    <Checkbox
      colorScheme="green" 
      size="lg"
      {...register("status")}
      onChange={(e) =>
        setValues({ ...values, status: e.target.value })
      }  
      defaultChecked={jobdetail.status === 1}
    />
  )}
  

• Convert the input to a controlled input, use the checked prop instead of the defaultChecked prop.

  <Checkbox
    colorScheme="green" 
    size="lg"
    {...register("status")}
    onChange={(e) =>
      setValues({ ...values, status: e.target.value })
    }  
    checked={jobdetail.status === 1}
  />