前提
React, TypeScriptを用いてToDoアプリを作成しています.
タスクの追加機能を実装したいのですが,エラーの原因がわからず修正に困っているためご教示いただけますと幸いです.
実現したいこと
- タスクを追加できるようにしたい
発生している問題・エラーメッセージ
TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction<Todo[]>'. Type 'undefined' is not assignable to type 'SetStateAction<Todo[]>'. 14 | const inputRef = useRef<HTMLInputElement>(null); 15 | const addTodo = () => { > 16 | setTodos(inputRef.current?.value); | ^^^^^^^^^^^^^^^^^^^^^^^ 17 | }; 18 | 19 | return (
該当のソースコード
TypeScript
1import React, { useState, useRef } from 'react'; 2import { ulid } from 'ulid'; 3 4function App() { 5 6 type Todo = { 7 id: string; 8 text: string; 9 } 10 11 const [todos, setTodos] = useState<Todo[]>( 12 [{id: ulid(), text: "テスト"}], 13 ); 14 const inputRef = useRef<HTMLInputElement>(null); 15 const addTodo = () => { 16 setTodos(inputRef.current?.value); 17 }; 18 19 return ( 20 <div className="App"> 21 <h1>ToDoアプリ</h1> 22 <div> 23 <input type="text"/> 24 <button onClick={addTodo}>追加</button> 25 <ul> 26 { todos.map((todo) => ( 27 <li key={todo.id}> 28 <label> 29 <input type="checkbox" ref={inputRef}/> 30 { todo.text } 31 <button>編集</button> 32 <button>削除</button> 33 </label> 34 </li> 35 )) } 36 </ul> 37 </div> 38 </div> 39 ); 40} 41 42export default App; 43
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。