Reactのクリックしたら削除する関数を作って孫コンポーネントに渡そうとしたところこんなエラーが出てしまいました。
・removeTodos関数は孫コンポーネントまで渡っているはずです。
・削除ボタンクリックすると下記のエラー出現。
このエラーがなくなれば上手く削除出来るはずです...!
プログラミングって難しいですね。
#出現したエラー
`TypeError: props.todos.map is not a function
List
src/List.js:5
2 | import Item from "./Item";
3 |
4 | const List = props => {
5 | const todos = props.todos.map((todo, i) => {
6 | return <Item key={i} desc={todo} removeTodos={props.removeTodos} />;
7 | });
8 | return <ol>{todos}</ol>;
View compiled`
App
1import React from "react"; 2import Form from "./Form"; 3import List from "./List"; 4 5const App = () => { 6 const [todos, setTodos] = React.useState(["走る", "跳ぶ", "投げる"]); 7 const addTodos = text => { 8 const newTodos = [...todos, text]; 9 setTodos(newTodos); 10 }; 11 const removeTodos = (todo) => { 12 const arrayTodos=todos.slice(); 13 const posi = arrayTodos.indexOf(todo); 14 arrayTodos.splice(posi, 1); 15 setTodos({arrayTodos}); 16 }; 17 return ( 18 <div> 19 <Form addTodos={addTodos} /> 20 <List todos={todos} removeTodos={removeTodos} /> 21 </div> 22 ); 23}; 24 25export default App; 26
List
1import React from "react"; 2import Item from "./Item"; 3 4const List = props => { 5 const todos = props.todos.map((todo, i) => { 6 return <Item key={i} desc={todo} removeTodos={props.removeTodos} />; 7 }); 8return <ol>{todos}</ol>; 9}; 10export default List; 11 12
Item
1import React from "react"; 2import styled from "styled-components"; 3const Item = (props) => { 4 const [isDone, setIsDone] = React.useState(false); 5 const toggleIsDone = () => setIsDone(!isDone); 6 const buttonText = isDone ? "戻す" : "完了"; 7 const handleClick=(todo)=> props.removeTodos(todo); 8 9 10 return ( 11 <li> 12 <p>{props.desc}</p> 13 <Button onClick={toggleIsDone}>{buttonText}</Button> 14 <button onClick={handleClick}>削除</button> 15 {/* ↑↑↑でクリック&削除のイベントハンドラ設置 */} 16 </li> 17 ); 18}; 19const Button = styled.button` 20 border-radius: 3px; 21 border: 2px solid pink; 22 color: pink; 23 margin: 0 1em; 24 padding: 0.25em 2em; 25`; 26export default Item; 27
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/28 14:07
2019/11/28 14:11
2019/11/28 14:58
2019/11/29 01:11
2019/11/29 11:49
2019/11/29 13:02