React propsの渡し方（初心者）
Q&A
Closed
解決したいこと
ここに解決したい内容を記載してください。
Reactでモーダルウィンドウを表示させたく、記事をもとに作成しているのですが、
propsを渡す際に、エラーが発生しました。
解決方法を教えてください。
発生している問題・エラー
出ているエラーメッセージを入力
ERROR in src/App.tsx:4:17
TS7031: Binding element 'show' implicitly has an 'any' type.
2 | import './App.css';
3 |
> 4 | function Modal({show}) {
| ^^^^
5 | if (show) {
6 | return (
7 | <div className="overlay">
ERROR in src/App.tsx:23:8
TS2786: 'Modal' cannot be used as a JSX component.
Its return type 'Element | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
21 | <div>
22 | <button onClick={() => setShow(true)}>Click</button>
> 23 | <Modal show = {show}/>
| ^^^^^
24 | </div>
25 | )
26 | }
コード
import { useState } from 'react';
import './App.css';
function Modal({show}) {
if (show) {
return (
<div className="overlay">
<div className="content">
<p>これがモーダルウィンドウです。</p>
<p><button>close</button></p>
</div>
</div>
)
} else {
}
};
function App() {
const [show, setShow] = useState<boolean>(false);
return (
<div>
<button onClick={() => setShow(true)}>Click</button>
<Modal show = {show}/>
</div>
)
}
export default App;
0
