React Typescript, как работает наMouseEnter

Question

У меня есть такой компонент, как:

const Componen: FC<Props> = ({}) => {

   const [title, setTitle] = React.useState("");

   return (
     <ChildComponent onMouseEnter={() => setTitle("some title")} />
     {title}
   )
}

Я уже определил тип для ChildComponent для этого события.

type ChildProps = {
  onMouseEnter?: () => void;
};

, но ничего не произошло. Итак, от onMouseEnter до ChildComponent setTitle не работает

Answer 1

onMouseEnter здесь не eventHandler, а просто опора для ChildComponent, и его нужно использовать ChildComponent и передавать в оборачивающий div

const Componen: FC<Props> = ({}) => {

   const [title, setTitle] = React.useState("");

   return (
     <ChildComponent onMouseEnter={() => setTitle("some title")} />
     {title}
   )
}

const ChildComponent: FC<Props> = ({ onMouseEnter }) => (
   <div onMouseEnter={onMouseEnter}>
       {/* rest of code */}
   </div>
)