React ToDoリスト xボタン押下で完了に移動

Question

React, JavaScriptも初心者です。

ToDoリストを作成しており、
新規追加したタスクのXボタンでクリックで
完了したタスクに移動させたいです。

途中まで書いたのですが、
この後は、
完了したタスク用の配列を追加して、
xボタンが押下されたら、そこに格納するようにしたら良いのでしょうか？

アドバイス頂けますと幸いです。

import React, { useState } from "react";

function ToDoListItem() {
  const toDoListData = [
    {
      title: "Learn React",
      completed: true
    },
    {
      title: "Write more Components",
      completed: false
    },
    {
      title: "Add some style",
      completed: false
    }
  ];

  const [todos, setTodo] = useState(toDoListData);

  const [title, setTitle] = useState("");

  const handleNewTask = (event) => {
    setTitle(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (title === "") return;
    setTodo((todos) => [...todos, { title, isCompleted: false }]);
    setTitle("");
  };

/*ココからちょっとよく分からなくなってきた

const handleCompletedTask = (index) => {
    event.preventDefault();
    return;
    setTodo((todos) => [...todos, { title, isCompleted: false }]);
    setTitle("");
  };
ココまで
*/

  const handleRemoveTask = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodo(newTodos);
  };



  return (
    <div>
      <h1>My To Do List:</h1>
      <form onSubmit={handleSubmit}>
        New Item <br />{" "}
        <input
          value={title}
          placeholder="Add New Item"
          onChange={handleNewTask}
        />
        <br />
      </form>
      To Do Items:
      <ul>
        
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.title} <span onClick={() => handleCompletedTask(index)}>X</span>
          </li>
        ))}

      </ul>
      Completed:
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.title} <span onClick={() => handleRemoveTask(index)}>X</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ToDoListItem;

Comments

[FKM]

コメントアウトしている部分を実行した場合、どういう挙動を示しますか？

[p19ljk]

「xボタンが押下されたら、そこに格納するようにしたら良いのでしょうか？」
やってみたけどダメだったなら分かりますが、〇〇したら良いでしょうか？のような質問は適切ではない気がします。
まずやってみて、それでダメだったら「〇〇してみたのですがダメでした。どうしたら良いですか？」とか「何が間違っていますか？」のような質問にしたほうが良いと思いますよ！

Answer 1

こんな感じでコンポーネント内に判定フラグをもたせれば、オブジェクトの振り分けができます。

//todoリストの制御用コンポーネント。flgは判定用
const todoList = (flg) =>{
	return todos.map((val, idx) =>{
		if(val.completed === flg){
			return(
				<li key={idx}>
					{val.title} <span onClick={() => handleCompletedTask(idx)}>X</span>
				</li>
			)
		}
	})
}

  return (
    <div>
      <h1>My To Do List:</h1>
      <form onSubmit={handleSubmit}>
        New Item <br />{" "}
        <input
          value={title}
          placeholder="Add New Item"
          onChange={handleNewTask}
        />
        <br />
      </form>
      To Do Items:
      <ul>
		{todoList(false)}
      </ul>
      Completed:
      <ul>
		{todoList(true)}
      </ul>
    </div>
  );

}

あとはxボタンを押したときに、変数todos内のcompleteのフラグ値を変えて、それを分割代入で同期をとれば、期待通りの動作ができるのではないかと思います。

制御を参考にしたページ
if文はJSXの中で書け