回答編集履歴
1
TypeScriptからJavaScriptに変更
test
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
`QuestionLists`に選択した答えも持たせて`state`化するのが一番楽だと思います。
|
|
2
|
+
|
|
3
|
+
[動作デモ](https://gr7p5.csb.app/)
|
|
2
4
|
|
|
3
5
|
|
|
4
6
|
|
|
5
7
|
```javascript
|
|
6
8
|
|
|
7
|
-
import { useState } from 'react'
|
|
9
|
+
import { useState } from 'react'
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
@@ -54,9 +56,9 @@
|
|
|
54
56
|
|
|
55
57
|
const [qLIsts, setqLists] = useState(QuestionLists)
|
|
56
58
|
|
|
57
|
-
const inputAnswer = (selectedAnswer
|
|
59
|
+
const inputAnswer = (selectedAnswer, targetIndex) => {
|
|
58
60
|
|
|
59
|
-
setqLists(qLIsts.map((list, index) => index === targetIndex ? { ...list, selectedAnswer } : list))
|
|
61
|
+
setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list)))
|
|
60
62
|
|
|
61
63
|
}
|
|
62
64
|
|
|
@@ -66,21 +68,25 @@
|
|
|
66
68
|
|
|
67
69
|
<div>
|
|
68
70
|
|
|
69
|
-
{qLIsts.map((
|
|
71
|
+
{qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => {
|
|
70
72
|
|
|
71
73
|
return (
|
|
72
74
|
|
|
73
|
-
<div key={
|
|
75
|
+
<div key={Question}>
|
|
74
76
|
|
|
75
|
-
<h1>{
|
|
77
|
+
<h1>{Question}</h1>
|
|
76
78
|
|
|
77
79
|
<div>
|
|
78
80
|
|
|
79
|
-
{
|
|
81
|
+
{Answers.map((answer) => {
|
|
80
82
|
|
|
81
83
|
return (
|
|
82
84
|
|
|
83
|
-
<button key={answer} onClick={() => inputAnswer(answer, index)}>
|
|
85
|
+
<button key={answer} onClick={() => inputAnswer(answer, index)}>
|
|
86
|
+
|
|
87
|
+
{answer}
|
|
88
|
+
|
|
89
|
+
</button>
|
|
84
90
|
|
|
85
91
|
)
|
|
86
92
|
|
|
@@ -88,7 +94,7 @@
|
|
|
88
94
|
|
|
89
95
|
</div>
|
|
90
96
|
|
|
91
|
-
{
|
|
97
|
+
{selectedAnswer && <div>{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
|
|
92
98
|
|
|
93
99
|
</div>
|
|
94
100
|
|
|
@@ -102,4 +108,6 @@
|
|
|
102
108
|
|
|
103
109
|
}
|
|
104
110
|
|
|
111
|
+
|
|
112
|
+
|
|
105
113
|
```
|