How to fix error with event handler and ts?

Question

typescript

Container.tsx

import React, { useEffect, MouseEvent } from "react";
import { useDispatch } from "react-redux";
import Home from "../pages/Home";
import { initForm } from "../store/forms/actions";

export interface HomePageContainerProps {}

const HomePageContainer: React.SFC<HomePageContainerProps> = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(initForm());
  }, []);

  const handleColorChange = () => {
    console.log("123");
  };

  return <Home onClickColorChange={handleColorChange} />;
};

export default HomePageContainer;

Component.tsx

import "./style.sass";

import React, { MouseEvent } from "react";

export interface HeaderProps {
  onClickColorChange: () => void;
}

const Header: React.SFC<HeaderProps> = ({ onClickColorChange }) => {
  return (
    <div className="header">
      <div className="header-content">
        <ul className="header-content-line_rgelems">
          <li onClick={onClickColorChange}>Поменять цвет</li>
        </ul>
      </div>
    </div>
  );
};

export default Header;

An error pops up in the container:

Type '{ onClickColorChange: () => void; }' is not assignable to type 'IntrinsicAttributes & IndexProps & { children?: ReactNode; }'.
  Property 'onClickColorChange' does not exist on type 'IntrinsicAttributes & IndexProps & { children?: ReactNode; }'.

What did I forget to do?

Answer 1

Why do you have onClickColorChange in the Header props in the component.tsx file, and you pass this property to Home from the pages/home file?