回答編集履歴
5
修正
test
CHANGED
@@ -11,12 +11,12 @@
|
|
11
11
|
|
12
12
|
return(
|
13
13
|
<div>
|
14
|
-
{visibilities.map((visib
|
14
|
+
{visibilities.map((visible, i) => (
|
15
15
|
<div key={textArr[i]}>
|
16
16
|
<button onClick={() => handleClick(i)}>
|
17
17
|
クリック
|
18
18
|
</button>
|
19
|
-
{visib
|
19
|
+
{visible && <p>{textArr[i]}</p>}
|
20
20
|
</div>
|
21
21
|
))}
|
22
22
|
</div>
|
4
追記
test
CHANGED
@@ -25,7 +25,7 @@
|
|
25
25
|
```
|
26
26
|
サンプル 👉 https://codepen.io/su507/pen/NWMrrRK?editors=0010
|
27
27
|
|
28
|
-
### 補足
|
28
|
+
### 補足1
|
29
29
|
`<div key={textArr[i]}>` としているので、textArr は同じ文字列を要素として持っていないことが前提になります。もし`textArr` は同じ文字列を要素として持っていると「`key`が重複している」旨の警告が表示されることになると思われます。
|
30
30
|
|
31
31
|
### 補足2
|
@@ -40,6 +40,9 @@
|
|
40
40
|
```
|
41
41
|
CodePenのサンプルは上記のように修正済みです。
|
42
42
|
|
43
|
+
### 補足3
|
44
|
+
|
45
|
+
テキストの表示、非表示切り替えの別のやり方として、テキストを囲んでいる `<p>` の style の `display` を、`none` または `block` で切り替えるという方法もあります。参考程度に眺めてください👉 https://codepen.io/su507/pen/qBYNNvJ?editors=0010
|
43
46
|
|
44
47
|
|
45
48
|
|
3
誤字修正
test
CHANGED
@@ -34,7 +34,7 @@
|
|
34
34
|
```javascript
|
35
35
|
[...Array(textArr.length)].map(_ => false)
|
36
36
|
```
|
37
|
-
とていましたが、手短かに以下で済んでました。
|
37
|
+
としていましたが、手短かに以下で済んでました。
|
38
38
|
```javascript
|
39
39
|
textArr.map(_ => false)
|
40
40
|
```
|
2
補足
test
CHANGED
@@ -34,9 +34,9 @@
|
|
34
34
|
```javascript
|
35
35
|
[...Array(textArr.length)].map(_ => false)
|
36
36
|
```
|
37
|
-
とていましたが、
|
37
|
+
とていましたが、手短かに以下で済んでました。
|
38
38
|
```javascript
|
39
|
-
|
39
|
+
textArr.map(_ => false)
|
40
40
|
```
|
41
41
|
CodePenのサンプルは上記のように修正済みです。
|
42
42
|
|
@@ -46,3 +46,4 @@
|
|
46
46
|
|
47
47
|
|
48
48
|
|
49
|
+
|
1
補足2
test
CHANGED
@@ -28,3 +28,21 @@
|
|
28
28
|
### 補足
|
29
29
|
`<div key={textArr[i]}>` としているので、textArr は同じ文字列を要素として持っていないことが前提になります。もし`textArr` は同じ文字列を要素として持っていると「`key`が重複している」旨の警告が表示されることになると思われます。
|
30
30
|
|
31
|
+
### 補足2
|
32
|
+
|
33
|
+
上記の回答コードの中で長さが `textArr.length` で値がすべてfalseの配列を作るところは
|
34
|
+
```javascript
|
35
|
+
[...Array(textArr.length)].map(_ => false)
|
36
|
+
```
|
37
|
+
とていましたが、より手短かに以下で済みました。
|
38
|
+
```javascript
|
39
|
+
Array(textArr.length).fill(false)
|
40
|
+
```
|
41
|
+
CodePenのサンプルは上記のように修正済みです。
|
42
|
+
|
43
|
+
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|