React: TODOアプリ作成につきまして質問です。

こんにちは。react.jsを学び始めたものです。練習のため、この度Todoアプリをpropsを利用して作成中です。そこで2点ほどつまづいてしまった箇所があるのでアドバイス頂けたら嬉しいです。よろしくお願い致します。

質問1点目：　タスクが完成状態になった時（isCompletedがtrue）、checkボタンの色を赤に変わるようにしたいのですが、どのようにすればできるでしょうか。三項演算子を使って試してみたのですが、結果は変わらずでした。

質問2点目：タスクのh1が表示されないですが、どのようにしたら表示されるようになるでしょうか。

Appjsx
1 import React, { useState } from "react";
2import Todo from "./components/Todo";
3import Form from "./components/Form";
4import "./styles.css";
5import "./responsive.css";
6
7export default function App() {
8  const [todos, setTodos] = useState([]);
9  const [isEditing, setIsEditing] = useState(false);
10  const [currentTodo, setCurrentTodo] = useState({});
11
12  function addTodo(newTodo) {
13    setTodos((prevTodos) => {
14      return [...prevTodos, newTodo];
15    });
16  }
17
18  function deleteTodo(id) {
19    setTodos((prevTodos) => {
20      return prevTodos.filter((todo, index) => {
21        return index !== id;
22      });
23    });
24  }
25
26  function handleEditClick(todo) {
27    setIsEditing(true);
28    setCurrentTodo({ ...todo });
29  }
30
31  function toggleComplete(id) {
32    const updatedItems = todos.map((todo) => {
33      if (id === todo.id) {
34        return { ...todo, isCompleted: !todo.isCompleted };
35      }
36      return todo;
37    });
38    setTodos(updatedItems);
39  }
40
41  function handleEditInputChange(e) {
42    setCurrentTodo({ ...currentTodo, text: e.target.value });
43  }
44
45  function handleUpdateTodo(id, updatedTodo) {
46    const updatedItem = todos.map((todo) => {
47      return todo.id === id ? updatedTodo : todo;
48    });
49    setIsEditing(false);
50    setTodos(updatedItem);
51  }
52
53  function handleEditFormSubmit(e) {
54    e.preventDefault();
55    handleUpdateTodo(currentTodo.id, currentTodo);
56  }
57
58  return (
59    <div className="App">
60      <div className="container">
61        {isEditing ? (
62          <form onSubmit={handleEditFormSubmit}>
63            <h2>Edit Item</h2>
64            <label htmlFor="editTodo">Edit item: </label>
65            <input
66              name="editTodo"
67              type="text"
68              placeholder="Edit todo"
69              value={currentTodo.text}
70              onChange={handleEditInputChange}
71            />
72            <button type="submit" className="updateBtn">
73              update
74            </button>
75          </form>
76        ) : (
77          <div className="formadd">
78            <Form onAdd={addTodo} />
79          </div>
80        )}
81        <div>
82          <h5>
83            <span>{todos.filter((todo) => todo.isCompleted).length}</span> items
84            completed
85          </h5>
86          {todos.map((todo, index) => {
87            return (
88              <Todo
89                key={index}
90                id={index}
91                text={todo.text}
92                onDelete={deleteTodo}
93                onEdit={handleEditClick}
94                onComplete={toggleComplete}
95              />
96            );
97          })}
98        </div>
99      </div>
100    </div>
101  );
102}
103

Todojsx
1
2import React from "react";
3
4function Todo(props) {
5  function handleClickD() {
6    props.onDelete(props.id);
7  }
8
9  function handleClickE() {
10    props.onEdit(props.id);
11  }
12
13  function handleComplete() {
14    props.onComplete(props.id);
15  }
16
17  return (
18    <div className="note">
19      <button
20        onClick={handleComplete}
21        className={this.isCompleted ? "yes" : "no"}
22      >
23        check
24      </button>
25      <h1>{props.text}</h1>
26      <button onClick={handleClickE}>Edit</button>
27      <button onClick={handleClickD}>delete</button>
28    </div>
29  );
30}
31

Formjsx
1
2import React from "react";
3
4function Todo(props) {
5  function handleClickD() {
6    props.onDelete(props.id);
7  }
8
9  function handleClickE() {
10    props.onEdit(props.id);
11  }
12
13  function handleComplete() {
14    props.onComplete(props.id);
15  }
16
17  return (
18    <div className="note">
19      <button
20        onClick={handleComplete}
21        className={this.isCompleted ? "yes" : "no"}
22      >
23        check
24      </button>
25      <h1>{props.text}</h1>
26      <button onClick={handleClickE}>Edit</button>
27      <button onClick={handleClickD}>delete</button>
28    </div>
29  );
30}
31

stylecss
1
2.App {
3  font-family: sans-serif;
4  text-align: center;
5  height: 200vh;
6  background: linear-gradient(4deg, skyblue, 80%, whitesmoke 20%);
7  position: relative;
8}
9
10.container {
11  background-color: Azure;
12  width: 50%;
13  margin: auto;
14  border-radius: 10px;
15  top: 10%;
16  position: absolute;
17  left: 25%;
18  padding-bottom: 10px;
19  -webkit-box-shadow: 0px 10px 13px -7px #000000,
20    5px 2px 8px 5px rgba(0, 0, 0, 0.64);
21  box-shadow: 0px 10px 13px -7px #000000,
22    5px 2px 8px 5px 5px rgba(0, 0, 0, 0.64);
23}
24
25ul {
26  list-style-type: none;
27}
28
29.note {
30  background: white;
31  width: 80%;
32  margin: auto;
33  border-radius: 10px;
34  padding: 10px;
35  position: relative;
36  margin-bottom: 10px;
37}
38
39.checkSymbol {
40  color: #dcdcdc;
41  top: 32px;
42  position: absolute;
43  left: 10px;
44  cursor: pointer;
45}
46
47.checkSymbol:hover {
48  transform: scale(1.3);
49}
50
51.rightSymbol {
52  cursor: pointer;
53  text-align: right;
54}
55
56.todoP {
57  left: 50px;
58  position: absolute;
59  top: 16px;
60}
61
62.deletemark {
63  margin-left: 20px;
64  margin-right: 10px;
65}
66
67.line-through {
68  text-decoration: line-through;
69}
70
71input {
72  height: 30px;
73  font-size: 20px;
74  width: 250px;
75}
76
77.updateBtn {
78  background-color: #008cba;
79  border: none;
80  color: white;
81  padding: 11px 25px;
82  text-align: center;
83  text-decoration: none;
84  display: inline-block;
85  font-size: 16px;
86  margin: 4px 2px;
87  cursor: pointer;
88}
89
90.yes {
91  background-color: red;
92}
93
94.no {
95  background-color: blue;
96}
97
98