回答編集履歴

5

修正

2022/09/11 09:08

投稿

退会済みユーザー
test CHANGED
@@ -11,12 +11,12 @@
11
11
 
12
12
  return(
13
13
  <div>
14
- {visibilities.map((visibilble, i) => (
14
+ {visibilities.map((visible, i) => (
15
15
  <div key={textArr[i]}>
16
16
  <button onClick={() => handleClick(i)}>
17
17
  クリック
18
18
  </button>
19
- {visibilble && <p>{textArr[i]}</p>}
19
+ {visible && <p>{textArr[i]}</p>}
20
20
  </div>
21
21
  ))}
22
22
  </div>

4

追記

2022/09/11 06:04

投稿

退会済みユーザー
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

誤字修正

2022/09/11 05:54

投稿

退会済みユーザー
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

補足

2022/09/11 05:51

投稿

退会済みユーザー
test CHANGED
@@ -34,9 +34,9 @@
34
34
  ```javascript
35
35
  [...Array(textArr.length)].map(_ => false)
36
36
  ```
37
- とていましたが、より手短かに以下で済ました。
37
+ とていましたが、手短かに以下で済んでました。
38
38
  ```javascript
39
- Array(textArr.length).fill(false)
39
+ textArr.map(_ => false)
40
40
  ```
41
41
  CodePenのサンプルは上記のように修正済みです。
42
42
 
@@ -46,3 +46,4 @@
46
46
 
47
47
 
48
48
 
49
+

1

補足2

2022/09/11 05:43

投稿

退会済みユーザー
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
+