Passing 2 functions in onChange in react

March 21, 2023

I have a parent component and a child component. I want to pass a function from parent component to child in onChange and also another function in the child component to update a state in the child component. How can this be done?

Parent

export function Fruits() {
  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    alert(e.target.value);
  };

  return (
    <div>
      <RadioBtnGroup
        options={FruitsOptions}
        name={"Fruits"}
        label="Choose Fruit:"
        radioBtnChangeHandler={onChangeHandler}
      />
    </div>
  );
}

Child

export function RadioBtnGroup({
  ...
}: React.HTMLAttributes<HTMLInputElement> {
  
  const [ariaValue, setAriaValue] = useState("");

  return (
    <>
      {label && (
        <h3 id="fruits-radio-group">{label}</h3>
      )}
      <div
        role="radiogroup"
        aria-labelledby="fruits-radio-group"
        aria-activedescendant={ariaValue}
        tabIndex={0}
      >
        {options?.map((option, index) => (
          <RadioBtn
            key={`radioOpt-${option.value}`}
            onChange={() => {
              radioBtnChangeHandler; 
              setAriaValue(e.currentTarget.value);
            }} //////////
            id={`radioOpt-${option.value}`}
            label={option.label}
            value={option.value}
          />
        ))}
      </div>
    </>
  );
}