Zenn
😀

React Hooks と TypeScript で子コンポーネントに state を渡す方法

2022/05/22に公開
React
TypeScript
tech

ReactとTypeScriptを使った子コンポーネントにstateを渡す際に以下のエラーに手こずったので、備忘録として残します。

Type '{ setStateProp: Dispatch<SetStateAction<string>>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'setStateProp' does not exist on type 'IntrinsicAttributes'.

エラーの概要としては「型を割り当てることができない」というエラーでした。

次項が、エラーが発生したコードです。

親コンポーネント

Parent.tsx
import React, { FC, useState } from "react";
import { Child } from "./Child";

export const Parent: FC = () => {
	const [stateProp, setStateProp] = useState<string>("");
	return (
		<div>
			<Child
				setState={setState}
			/>
		</div>
	);
};

この記述でJSXならば、StateをPropsとしてエラーなく子コンポーネントに渡せますが、TypeScriptでは型を子コンポーネントで割り当てて渡すようにしないと、上記のエラーが出ます。

そして、エラー発生時の子コンポーネントの記述はというと、以下のようになっていました。

子コンポーネント

TaskAddInput.tsx
import React { FC } from "react";

export const Child: FC = ({
   setStateProp
}) => {

	return (
		<div></div>
	);
};

上記のコードでは、Propsとして渡したStateの型を定義できていない状態になっています。

これだと、例のエラーがでます。

解決法

解決方法としては、子コンポーネント側でStateの型を定義してあげることで解決できます。
そして、定義する型ですが、エラーの中に実は記載されています。

Type '{ setState: Dispatch<SetStateAction<string>>; }' is not assignable to type 'IntrinsicAttributes'.

このエラー情報の中のDispatch<SetStateAction<string>>を定義するだけで、エラーを解決できます。

Child.tsx
import React { FCDispatch, SetStateAction } from "react";

export const Child: FC<{ Dispatch<SetStateAction<string>> }> = ({
   setStateProp
}) => {

	return (
		<div></div>
	);
};

このようにすることでエラーを解決でき、子コンポーネント側にstateを渡すことができます。

他にも、やり方があるので、気になった方は以下の参考文献を読んでみてください。

参考文献

React Hooks と TypeScript で子コンポーネントに state を渡す方法まとめ

Discussion