Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'number'.ts (2345)

Question

I am building a survey like application, and I have a .map function which renders the question, answers some data from a JSON API..

This is basically rendering the answers, and my error is onClick function, it grumples for the e event:

{dataJSON[selectedIndex].answers.map((item, key) => (
      <React.Fragment key={key}>
      <ButtonCheckKhyria
      key={key}
      checked={tick[key]}
      text={item}
      onClick={(e) =>
            handleCheckInput(
                 e,
                 key,
                 dataJSON[selectedIndex]['id']
                 )}
      />
      </React.Fragment>
      ),
      )}

The error message is: Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'number'.ts(2345

and here's my handleCheckInput, it is basically multiple choice answers where you can pick more than one (not like radio buttons):

const handleCheckInput = (
      key: number,
      questionId: number,
      e: React.ChangeEvent<HTMLInputElement>,
   ) => {
      let newTickArray = [...tick];
      newTickArray[key] = !tick[key];
      setTick(newTickArray);
      setValues({
         ...values,
         [questionId]: e?.target?.value,
      });
   };

Any help would be appreciated!

Answer 1

You are not giving correct propType or assigning it value with different datatype/propType so either assign it number or MouseEvent<HTMLButtonElement, MouseEvent>

Try sending and receiving the props in same manner and Do like this and try again!

const handleCheckInput = (
      e: MouseEvent<HTMLButtonElement, MouseEvent>, // Try this type
      key: number,
      questionId: number,
   )

Here you are sending first parameter is e whom type is MouseEvent<HTMLButtonElement, MouseEvent> and where you are receiving it, there you are assigning it with number like this key: number. So change the ordering and assign right data type and it will work.

handleCheckInput(
   e, //this should be received first and also hover it to see dataType
   key,
   dataJSON[selectedIndex]['id']
  )