how to verify checkbox is checked in react/typescript

Question

i want to verify that my custom component checkbox is checked when i trigger a click. Actually, i tried many differents stuffs and still not working. Here is my custom component

interface IProps {
  checked: boolean;
  type?: 'filledDotPrimary' | 'checkmark' | 'checkmarkValid';
  disabled?: boolean;
  hasError?: boolean;
  hasLabel?: boolean;
  isActuallyCheckbox?: boolean;
  labelStyle?: 'default' | 'outlined';
  name: string;
  onCheck?: (event: ChangeEvent<HTMLInputElement>) => void;
  overrideContainer?: string;
  id?: string;
  testId?: string;
}
/**
 * Custom radio input built using regular and solid css svgs.
 *
 * @param checked boolean. Defines the style when checked.
 * @param disabled boolean (optional). Defines the style when disabled: no box shadow and slightly grey background.
 * @param hasError boolean (optional). Defines the style red borders of the circle if error happens.
 * @param color 'primary' | 'valid'. By default 'primary' (blue), use 'valid' for green background.
 * @param type 'filledDot' | 'checkmark'. By default 'filledDot' (circle with circle), use 'checkmark' for different style.
 * @param name string. Mandatory for identifying the label with its input.
 * @param onCheck MouseEvent<HTMLElement>(optional). Define action when checked
 * @param overrideContainer string(optional). Modify container css
 *
 * @returns div + input type radio + label
 */

const RadioButton: FC<IProps> = ({
  checked,
  disabled = false,
  hasError = false,
  isActuallyCheckbox = false,
  labelStyle = 'default',
  type = 'filledDotPrimary',
  name,
  onCheck = () => {},
  overrideContainer = '',
  id = '',
  testId = '',
}): ReactElement<any, any> => {
  return (
    <span
      className={classnames(
        styles[`${type}`],
        hasError ? styles.error : false,
        labelStyle === 'outlined' ? styles.outlinedAlign : false,
        overrideContainer
      )}
      onClick={(event: MouseEvent<HTMLInputElement>): void => event.stopPropagation()}
    >
      {isActuallyCheckbox ? (
        <input type="checkbox" name={name} id={id} disabled={disabled} checked={checked}  onChange={onCheck} />
      ) : (
        <input type="radio" name={name} id={id} disabled={disabled} checked={checked} onChange={onCheck} />
      )}
      <label htmlFor={id}>
        {labelStyle === 'outlined' ? (
          <span className={checked ? styles.outlinedSelected : hasError ? styles.outlinedError : styles.outlined}>
            {name}
          </span>
        ) : (
          name
        )}
      </label>
    </span>
  );
};

export default RadioButton;

and here is where i use this RadioButton component

  <RadioButton type="checkmark" name=""  onCheck={onCheck} isActuallyCheckbox={true}  checked={doubleApproval} />

the oncheck method which is supposed to trigger the event, but it seems not working even when i console.log()

// state declaration
   const [doubleApproval, setDoubleApproval] = useState<boolean>(false);

// functions
  function onCheck(): void {
    console.log("clicked")
    setDoubleApproval(!doubleApproval);
  }

can someone tell me why it doesn't working and how could fix it please ?

Answer 1

I found the issue Actually, I had to provide the id attribute to my input which is related to my component so that react can detect it. In my case, I didn't provide an id attribute, so react doesn't actually know which element is in action. So I have this finally:

<RadioButton 
  type="checkmark" 
  name='' 
  id='radio1' 
  onCheck={onCheck}   
  isActuallyCheckbox={true}  
  checked={doubleApproval} 
 />