Reactのpropsで関数を渡すとts2322エラーが出る

Question

前提

React + TypeScriptでpropsに関数を渡すとts2322エラーが出力される

実現したいこと

onClickで検知されているtypeエラーの解消

発生している問題・エラーメッセージ

TS2322: Type '{ isOpen: boolean; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & Props'.

該当のソースコード

// App.tsx
import React, { useState } from "react";
import "./App.scss";
import StatusTestButton from "./components/sample/StatesTest_props";

const [isOpen, setIsOpen] = useState(false);
const changeOpenStatus = () => {
  setIsOpen(true);
};

const App = () => {
  // ここのonClickでts2322エラーを検知
  return <StatusTestButton isOpen={isOpen} onClick={changeOpenStatus} />;
};

export default App;

// StatesTest_props.tsx
import React from "react";

type Props = {
  isOpen: boolean;
  changeOpenStatus: () => void;
};

const StatusTestButton = (props: Props) => {
  return <button onClick={() => props.changeOpenStatus}>{props.isOpen}</button>;
};

export default StatusTestButton;

試したこと

typesの宣言を試したがうまくいかず。

補足情報（FW/ツールのバージョンなど）

package.jsonより
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.7.4",
"eslint": "^8.20.0",
"eslint-plugin-react": "^7.30.1"

Answer 1

色々とミスしており、手元で解決

// App.tsx
import React, { useState } from "react";
import "./App.scss";
import StatusTestButton from "./components/sample/StatesTest_props";

const App = () => {
  // useStateやchangeOpenStatusをApp配下に移動
  const [isOpen, setIsOpen] = useState(false);
  const changeOpenStatus = () => {
    setIsOpen(true);
  };

  return <StatusTestButton isOpen={isOpen} onClick={changeOpenStatus} />;
};

export default App;

import React from "react";

type Props = {
  isOpen: boolean;
  // typeのchangeOpenStatusをonClickに変更
  onClick: () => void;
};

const StatusTestButton = (props: Props) => {
  return (
    // props.onClick -> props.onClick()に変更
    // props.isOpen -> props.isOpen.toString()に変更
    <button onClick={() => props.onClick()}>{props.isOpen.toString()}</button>
  );
};

export default StatusTestButton;