質問編集履歴
1
補足事項
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
axios deleteメソッドの使い方
|
body
CHANGED
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
setTodos(todos.concat(res.data));
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
|
-
const deleteTodo =
|
|
40
|
+
const deleteTodo = id => {
|
|
41
|
-
axios.delete(`http://localhost:3000/todos/${
|
|
41
|
+
axios.delete(`http://localhost:3000/todos/${id}（⬅️ここの書き方がググっても出来ませんでした！！！）`, todo).then(res => {
|
|
42
42
|
setTodos(todos.filter(e => e !== todo));
|
|
43
43
|
});
|
|
44
44
|
};
|
|
@@ -52,4 +52,37 @@
|
|
|
52
52
|
|
|
53
53
|
export default App;
|
|
54
54
|
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```Item
|
|
58
|
+
import React from "react";
|
|
59
|
+
|
|
60
|
+
import styled from "styled-components";
|
|
61
|
+
|
|
62
|
+
const Item = props => {
|
|
63
|
+
const [isDone, setIsDone] = React.useState(false);
|
|
64
|
+
const toggleIsDone = () => setIsDone(!isDone);
|
|
65
|
+
// ↑こうしないとがっつりエラーになる
|
|
66
|
+
// でないとsetIsDoneが永遠に作動し続ける。
|
|
67
|
+
const handleClick = () => props.deleteTodo(props.desc);⇦ここの引数をidにしたいです！（現状テキスト）
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<li>
|
|
71
|
+
<ContentText isDone={isDone}>{props.desc}</ContentText>
|
|
72
|
+
<DoneBtn isDone={isDone} onClick={toggleIsDone}>
|
|
73
|
+
{isDone ? "戻す" : "完了！"}
|
|
74
|
+
</DoneBtn>
|
|
75
|
+
<button onClick={handleClick}>削除</button>
|
|
76
|
+
</li>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
const ContentText = styled.p`
|
|
80
|
+
text-decoration: ${props => (props.isDone ? "line-through" : "none")};
|
|
81
|
+
`;
|
|
82
|
+
const DoneBtn = styled.button`
|
|
83
|
+
color: ${props => (props.isDone ? "gray" : "black")};
|
|
84
|
+
`;
|
|
85
|
+
|
|
86
|
+
export default Item;
|
|
87
|
+
|
|
55
88
|
```
|