Как исправить ошибку с event handler и ts?

Question

[WizardW]

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;

На в контейнере вылазит ошибка:

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

Что я забыл сделать?

Answer 1

[Robur]

Почему у вас onClickColorChange в пропсах у Header в файле component.tsx, а передаете это свойство вы в Home из файла pages/home?

Comments

[WizardW]

В контейнере рендерю , туда же в параметры передаю onClickColorChange={handleColorChange} в container.tsx

[Robur]

WizardW, перечитайте мой вопрос еще раз :)

[WizardW]

Robur, понял, не увидел сразу, спасибо)