React ToDoリスト削除機能の追加

Question

クリックしたら削除する関数を親コンポーネントで作成しそれを孫に渡すところまで完成しました。しかしその関数のロジック自体がミスをしているらしくエラーが出てしまっています。考えている関数のロジックとしては新しいリストの配列を作成し、クリックされた要素のインデックス取得後該当する要素を削除する流れで考えています！

######以下がそのエラー
ReferenceError: Cannot access 'todos' before initialization
removeTodos
src/App.js:13
10 | setTodos(newTodos);
11 | };
12 | const removeTodos = (todo) => {

13 | const todos=todos.slice();

 | ^  14 |   const posi = todos.indexOf(todo);

15 | todos.splice(posi, 1);
16 | setTodos({ todos: todos });

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

const App = () => {
  const [todos, setTodos] = React.useState(["走る", "跳ぶ", "投げる"]);
  console.log(todos)
  const addTodos = text => {
    const newTodos = [...todos, text];
    setTodos(newTodos);
  };
  const removeTodos = (todo) => {
    const todos=todos.slice(); 
    const posi = todos.indexOf(todo);
    todos.splice(posi, 1);
    setTodos({ todos: todos });
  };
  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

const todos=todos.slice(); 

こう宣言した以上、この関数内でのtodosはこの宣言を指すことになり、外側のtodosは見えなくなってしまいます。

関数内のtodosを別な名前にしましょう。

Comments

[Kosuke0906]

ありがとうございます！
関数内の問題は解決されました！

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>;
このエラーが出ましたが、頑張ってみます！！