I'm writing my first app in React TypeScript and I can't seem to figure out some things by myself.

I get lots of errors and I don't get why. Here's the message

Type '{ ref: MutableRefObject<any>; letter: string; onSelectFunction: { onSelectAnswer: (event: SyntheticEvent<HTMLDivElement, Event>) => void; }; }' is not assignable to type 'Content'.
  Types of property 'onSelectFunction' are incompatible.
    Type '{ onSelectAnswer: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void; }' is not assignable to type 'ReactEventHandler<HTMLDivElement>'.
      Type '{ onSelectAnswer: (event: SyntheticEvent<HTMLDivElement, Event>) => void; }' provides no match for the signature '(event: SyntheticEvent<HTMLDivElement, Event>): void'.

Here's the code: Content.tsx

import React, { useRef, useState, useEffect, SyntheticEvent } from 'react';
import { Row, Col } from 'react-bootstrap'
import Box from './Box';
import ButtonCustom from './Button';

function Content() {
    const correctResponse: string = "C";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSubmitAnswer = () => {
        
    };

    const onSelectAnswer = (event: SyntheticEvent<HTMLDivElement, Event>) => {
        console.log(event);        
    };

    const box0 = useRef<any>();
    const box1 = useRef<any>();
    const box2 = useRef<any>();
    const box3 = useRef<any>();
    const box4 = useRef<any>();   
    
    return (
        <div>
            <Box {...{letter: 'A', onSelectFunction: {onSelectAnswer}}} ref={box0}/>
            <Row>
            <Col md>
            <Box {...{ letter: 'A', onSelectFunction: {onSelectAnswer}}} ref={box1} />
            </Col>
            <Col md>
            <Box {...{ letter: 'B', onSelectFunction: {onSelectAnswer}}} ref={box2} />
            </Col>
            <Col md>
            <Box {...{ letter: 'C', onSelectFunction: {onSelectAnswer}}} ref={box3} />
            </Col>
            <Col md>
            <Box {...{ letter: 'D', onSelectFunction: {onSelectAnswer}}} ref={box4} />
            </Col>
            </Row>
            <br/>
            { selectedResponse === correctResponse ? <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 1}}/> : <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 0}}/> }
        </div>
    );
}

export default Content;

Box.tsx

import React, { ReactEventHandler } from 'react';
import './Box.css';

type Content = {
  onSelectFunction: ReactEventHandler<HTMLDivElement>,
  letter: string
}

const Box = React.forwardRef<HTMLDivElement, Content>((props, ref) => {
  return (
    <div ref={ref} className="box" onSelect={props.onSelectFunction}>
      <span className="box-content">
        {props.letter}
      </span>
    </div>
  );
});

export default Box;

I literally have no idea what to do to fix them.

I tried changing onSelectFunction's type to

React.SyntheticEvent<HTMLDivElement, Event>

but then I get another errors.

As a beginner, I would be really glad if anybody could explain to me why are these errors thrown and how can I fix them.

Typescript playground

CodePudding user response：

this is working. Please note that I change the name of the type Content to TContent to avoid confusion and better readability

type TContent = {
  onSelectFunction: ReactEventHandler<HTMLDivElement>,
  letter: string
}

const Box = React.forwardRef<HTMLDivElement, TContent>((props, ref) => {
  return (
    <div ref={ref} className="box" onSelect={props.onSelectFunction}>
      <span className="box-content">
        {props.letter}
      </span>
    </div>
  );
});




function Content() {
    const correctResponse: string = "C";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSubmitAnswer = () => {
        
    };

    const onSelectAnswer = (event: SyntheticEvent<HTMLDivElement, Event>) => {
        console.log(event);        
    };

    const box0 = useRef<any>();
    
    return (
        <div>
            <Box letter="A" onSelectFunction= {onSelectAnswer} ref={box0}/>
        </div>
    );
}

export default Content;