todoリストをクリックで削除機能をつけたい

Question

ToDoアプリでクリックしたリストの削除方法

Reactでtodoアプリの作成をしています。
追加する機能は作成したのですが、削除する機能のコードで苦戦中です。

ネットにたくさんあるクラスコンポーネントのやり方を真似して関数コンポーネントに組み込んでみましたが、苦戦中。

ソースコードは下記です。

よろしくお願いいたします！

発生している問題・エラーメッセージ

 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

該当のソースコード

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 = (i) => {
    const deleteTodos = [...todos];
    deleteTodos.splice(i,1);
    setTodos(this.StaticRange.todos);
  };
  return (
    <div>
      <Form addTodos={addTodos} />
      <List todos={todos} removeTodos={removeTodos} />
    </div>
  );
};

export default App;

親であるAppで作成したremoveTodos関数をpropsで孫であるItem.jsに渡します。

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

const List = (props) => {
  const todos = props.todos.map((todo, i) => {
    return <Item key={i} desc={todo} />;
  });
  const removeTodos =props.removeTodos
return <ol>{todos}{removeTodos}</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=(e)=>{
    e.preventDefault();
    props.removeTodos()
  }
  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

List コンポーネントから Item コンポーネントに対して removeTodos が正しく渡されていないようです。
以下のような形で removeTodos を Item コンポーネントの props に渡してあげると良いと思います。
(バケツリレーになってしまうのであまり良い形ではないかもしれないですが、、、)

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

これで Item コンポーネント内で props.removeTodos が利用できるようになると思います。
(removeTodos()の引数に Item の key を渡すのをお忘れなく)

また、List コンポーネントの return で removeTodos を render しようとしてエラーが発生していると思われます。

const removeTodos =props.removeTodos
return <ol>{todos}{removeTodos}</ol>;

Comments

[Kosuke0906]

ご連絡ありがとうございます。

エラーがなくなりました！
Itemにうまく渡ったみたいです！

後は構文自体が上手く書けてないので頑張ってみます！