React リスト削除機能追加 エラーの解消

Question

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`

import React from "react";
import Form from "./Form";
import List from "./List";

const App = () => {
  const [todos, setTodos] = React.useState(["走る", "跳ぶ", "投げる"]);
  const addTodos = text => {
    const newTodos = [...todos, text];
    setTodos(newTodos);
  };
  const removeTodos = (todo) => {
    const arrayTodos=todos.slice(); 
    const posi = arrayTodos.indexOf(todo);
    arrayTodos.splice(posi, 1);
    setTodos({arrayTodos});
  };
  return (
    <div>
      <Form addTodos={addTodos} />
      <List todos={todos} removeTodos={removeTodos} />
    </div>
  );
};

export default App;

import React from "react";
import Item from "./Item";

const List = props => {
  const todos = props.todos.map((todo, i) => {
    return <Item key={i} desc={todo} removeTodos={props.removeTodos} />;
  });
return <ol>{todos}</ol>;
};
export default List;

import React from "react";
import styled from "styled-components";
const Item = (props) => {
  const [isDone, setIsDone] = React.useState(false);
  const toggleIsDone = () => setIsDone(!isDone);
  const buttonText = isDone ? "戻す" : "完了";
  const handleClick=(todo)=> props.removeTodos(todo);

  
  return (
    <li>
      <p>{props.desc}</p>
      <Button onClick={toggleIsDone}>{buttonText}</Button>
      <button onClick={handleClick}>削除</button>
      {/* ↑↑↑でクリック＆削除のイベントハンドラ設置 */}
    </li>
  );
};
const Button = styled.button`
  border-radius: 3px;
  border: 2px solid pink;
  color: pink;
  margin: 0 1em;
  padding: 0.25em 2em;
`;
export default Item;

Answer 1

こんにちは

以下の2点、(1)(2)を修正してみると、いかがでしょうか？

(1) Item の handleClick

修正前

const handleClick=(todo)=> props.removeTodos(todo);

修正後

const handleClick = () => props.removeTodos(props.desc);

(2) App の removeTodos で setTodos する箇所

修正前

setTodos({arrayTodos});

修正後

setTodos(arrayTodos);

以下は、ご質問のコードをCodePenに転記して、さらに上記2点の修正をしたものです。

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/KKKORjY

参考になれば幸いです。

補足

filter　を使うと、 removeTodos は、以下のように書けます。

  const removeTodos = (todo) => {
    setTodos(todos.filter(e => e !== todo));
  };

上記の場合、引数の todo に一致するものが todos に複数あった場合、それらの全てが除外された配列で、todosを更新します。

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/bGGXKKP

Comments

[Kosuke0906]

動きました！！

ありがとうございます！
自分も早く教えられるようになります。????

[jun68ykt]

どういたしまして。
> 動きました！！
とのことでよかったです????

[Kosuke0906]

補足事項の方が便利ですね！

同じ要素があるときこちらじゃないと不便です！

[jun68ykt]

はい。
> 同じ要素が
あり得る場合、ちょっと考慮しないといけない点がありますね。

たとえば、todos の初期値の配列に、 もうひとつ "走る" を末尾に追加して

const [todos, setTodos] = React.useState(["走る", "跳ぶ", "投げる", "走る"]);

というものにして、

走る
跳ぶ
投げる
走る

という初期状態から、（先頭ではなく）末尾の "走る" を削除しようとしたときにどうなるか、考えてみます。
まず、ご質問に挙げられているほうの

const removeTodos = (todo) => {
const arrayTodos=todos.slice();
const posi = arrayTodos.indexOf(todo);
arrayTodos.splice(posi, 1);
setTodos(arrayTodos);
};

で削除すると、期待している

走る
跳ぶ
投げる

ではなくて、

跳ぶ
投げる
走る

になります。つまり、末尾の「走る」ではなく、先頭の「走る」が削除されてしまいます。これは、 indexOf が引数と同じ値の要素のうち、最初のもののインデクスを返すからです。

では、私が回答に追記したほうの filterを使った

const removeTodos = (todo) => {
setTodos(todos.filter(e => e !== todo));
};

だとどうなるかというと、先頭と末尾の「走る」がともに削除されて、

跳ぶ
投げる

になってしまいます。つまり、どちらにしても、ちょっと望ましい結果とは言えないですよね？

ですので、ご質問にあるコードをベースとして、次の課題として、初期値として

["走る", "跳ぶ", "投げる", "走る"]

を与えて、末尾(=インデクスが3）の「走る」を削除しようとしたときに、末尾の「走る」だけがtodosから除外されるように修正してみるというのをやってみるとよいかもしれません。

[Kosuke0906]

丁寧にありがとうございます！
すごくわかりやすいです。

個人レッスンみたいで、
やる気がかなり上がりますね！

なんとかやりきります！！

[jun68ykt]

もし、上記の”末尾の「走る」だけを除外する”　ように修正することに挑戦してみたけれども上手く出来なかった、ということになったら、その「上手くいくと思ってやりかけたが、分からなくなった」という時点でのコードを添えて、新たにご質問されるとよいでしょう。Good luck to you !