checkbox functionality using react with typescript

I noticed that you have the same onClick function for both the header input and the children inputs. In order to make this work, we need to create another handleClick function for the children inputs.

1. Create an array of boolean values

   const isCheckedData = data.map((item)=>{ return false; });

2. Add another state which would hold this array

   const [isCheckedArray, setIsCheckedArray] = useState(isCheckedData);

3. Distribute the values of the array to your mapped data below

{data?.map((item: any, index) => ( <>

        <div className="row">
          <div className="col">
            <input
              onClick={() => handleClickChildren(index)} checked={isCheckedArray[index]}
              type="checkbox" />
          </div>
          <div className="col">{item?.name}</div>
          <div className="col">{item?.username}</div>
          <div className="col">{item?.email}</div>
          <div className="col">{item?.phone}</div>
          <div className="col">{item?.website}</div>
          <div className="col">{item?.address?.street}</div>
        </div>
      </>
    ))}

4. Create a function that will take the index as an argument so that we could change the value of a specific checkbox in our state.

const handleClickChildren = (index) => {
const findCheckBox = isCheckedArray.find(data=>isCheckedArray. indexOf(data)===index);
const newCheckedArray = isCheckedArray.splice(isCheckedArray.indexOf(findCheckBox), 1, !findCheckBox);
setIsCheckedArray(newCheckedArray);

Check the docs for splice for more info, but basically what that does is it just replaces the previous value to true or false. https://www.w3schools.com/jsref/jsref_splice.asp

5.) Lastly, Refactor your first handleOnClick function to change the state of the isCheckedArray depending if the header checkbox is set to true or false.

This example may help you: https://chakra-ui.com/docs/components/form/checkbox#indeterminate

Basically, there're only 2 rules like you listed:

• The header checkbox is checked only if all other checkboxes are checked (we test this by using .every())
• The header checkbox is indeterminate only if there are just some checkboxes are checked (we test this by using .some())

Example in javascript, with react where you have the functionality that you want.

import React, { useEffect, useState } from 'react';

const CHECKBOX_VALUES = [false, false];

function Question16() {
  const [checkboxValues, setCheckboxValues] = useState(CHECKBOX_VALUES);
  const checkboxRef = React.useRef(null);

  const onCheck = (pos, value) => {
    const nextCheckboxValues = [ ...checkboxValues ];
    nextCheckboxValues[pos] = value;
    setCheckboxValues(nextCheckboxValues);
  }

  useEffect(() => {
    const isIndeterminate = checkboxRef.current.indeterminate;
    const someCheckboxChecked = checkboxValues.some((checkValue) => checkValue);
    const someCheckboxUnchecked = checkboxValues.some((checkValue) => !checkValue);
    const nextIndeterminate = someCheckboxChecked && someCheckboxUnchecked;
    if (isIndeterminate !== nextIndeterminate) {
      checkboxRef.current.indeterminate = nextIndeterminate;
    }
    if (!nextIndeterminate) {
      checkboxRef.current.checked = someCheckboxChecked;
    }
  }, [checkboxValues]);
  
  return (
    <>
      <div>
        <span>Parent checkbox</span>
        <input type="checkbox" ref={checkboxRef} />
      </div>
      <div>
        <span>Checkbox 1</span>
        <input
          checked={checkboxValues[0]}
          onChange={(elem) => {
              const value = elem.target.checked;
              onCheck(0, value);
          }}
          type="checkbox"
        />
      </div>
      <div>
        <span>Checkbox 2</span>
        <input
          checked={checkboxValues[1]}
          onChange={(elem) => {
            const value = elem.target.checked;
            onCheck(1, value);
          }}
          type="checkbox"
        />
      </div>
    </>
  );
}

export default Question16;