回答編集履歴
1
TypeScriptからJavaScriptに変更
answer
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
`QuestionLists`に選択した答えも持たせて`state`化するのが一番楽だと思います。
|
|
2
|
+
[動作デモ](https://gr7p5.csb.app/)
|
|
2
3
|
|
|
3
4
|
```javascript
|
|
4
|
-
import { useState } from 'react'
|
|
5
|
+
import { useState } from 'react'
|
|
5
6
|
|
|
6
7
|
const QuestionLists = [
|
|
7
8
|
{
|
|
@@ -26,28 +27,31 @@
|
|
|
26
27
|
|
|
27
28
|
export default function App() {
|
|
28
29
|
const [qLIsts, setqLists] = useState(QuestionLists)
|
|
29
|
-
const inputAnswer = (selectedAnswer
|
|
30
|
+
const inputAnswer = (selectedAnswer, targetIndex) => {
|
|
30
|
-
setqLists(qLIsts.map((list, index) => index === targetIndex ? { ...list, selectedAnswer } : list))
|
|
31
|
+
setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list)))
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
return (
|
|
34
35
|
<div>
|
|
35
|
-
{qLIsts.map((
|
|
36
|
+
{qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => {
|
|
36
37
|
return (
|
|
37
|
-
<div key={
|
|
38
|
+
<div key={Question}>
|
|
38
|
-
<h1>{
|
|
39
|
+
<h1>{Question}</h1>
|
|
39
40
|
<div>
|
|
40
|
-
{
|
|
41
|
+
{Answers.map((answer) => {
|
|
41
42
|
return (
|
|
42
|
-
<button key={answer} onClick={() => inputAnswer(answer, index)}>
|
|
43
|
+
<button key={answer} onClick={() => inputAnswer(answer, index)}>
|
|
44
|
+
{answer}
|
|
45
|
+
</button>
|
|
43
46
|
)
|
|
44
47
|
})}
|
|
45
48
|
</div>
|
|
46
|
-
{
|
|
49
|
+
{selectedAnswer && <div>{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
|
|
47
50
|
</div>
|
|
48
51
|
)
|
|
49
52
|
})}
|
|
50
53
|
</div>
|
|
51
54
|
)
|
|
52
55
|
}
|
|
56
|
+
|
|
53
57
|
```
|