回答編集履歴
5
コード修正
test
CHANGED
|
@@ -90,9 +90,9 @@
|
|
|
90
90
|
|
|
91
91
|
{list_by_2.map(items => ( // itemsは[{...}, {...}]
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
<div className="grid_inner">
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
items.map(item => (
|
|
96
96
|
|
|
97
97
|
<div className="title">
|
|
98
98
|
|
|
@@ -110,9 +110,9 @@
|
|
|
110
110
|
|
|
111
111
|
</ul>
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
)
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
</div>
|
|
116
116
|
|
|
117
117
|
)}
|
|
118
118
|
|
4
コード修正
test
CHANGED
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<ul className="footer-category-links">
|
|
104
104
|
|
|
105
|
-
{item.children.map(({_id, name}) => ( // i
|
|
105
|
+
{item.children.map(({_id, name}) => ( // child => ...の代わりに ({_id, name}) => ...と分割代入しています
|
|
106
106
|
|
|
107
107
|
<li key={_id}><a href={_id}>{name}</a></li>
|
|
108
108
|
|
3
不要な文面を削除
test
CHANGED
|
@@ -68,8 +68,6 @@
|
|
|
68
68
|
|
|
69
69
|
そんな感じで書いていくと、以下のようになると思います。
|
|
70
70
|
|
|
71
|
-
（ReactというかJSXの書き方を間違えているところがあったので、適宜修正しています）
|
|
72
|
-
|
|
73
71
|
|
|
74
72
|
|
|
75
73
|
```jsx
|
2
誤字修正
test
CHANGED
|
@@ -44,23 +44,25 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
以上の話を踏まえた上で、実現したいことは`list`の要素を2つづつ`<div class="grid-inner">〜</div>`に入れるということでよろしいでしょうか。
|
|
47
|
+
以上の話を踏まえた上で、実現したいことは`list`の要素を2つづつ`<div class="grid-inner">〜</div>`に入れるということでよろしいでしょうか。であれば、まず`list`の要素を2つづつ取り出して`list_by_2`という配列にし、その配列を`Array.prototype.map`で操作していきましょう。
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
「配列の要素を2つづつ取り出して配列にする」ために「配列をn個づつに分割する」関数を定義します。
|
|
52
|
+
|
|
53
|
+
[JSで配列をn個ずつに分割 - Qiita](https://qiita.com/guttyar2213/items/46230300c5100a06198c)のコードを使っています。
|
|
52
54
|
|
|
53
55
|
|
|
54
56
|
|
|
55
|
-
|
|
57
|
+
```js
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
const split = (array, n) => array.reduce((a, c, i) => i % n == 0 ? [...a, [c]] : [...a.slice(0, -1), [...a[a.length - 1], c]], [])
|
|
60
|
+
|
|
61
|
+
```
|
|
58
62
|
|
|
59
63
|
|
|
60
64
|
|
|
61
|
-
これを`list`に適用すると、`[ [{...}, {...}], [{...}, {...}], ... ]`と`list`の要素が2つづつ配列に入った配列になります。
|
|
62
|
-
|
|
63
|
-
そして`list_by_2.map(items => ...)`の`items`は`[{...}, {...}]`となりますから、再び`items.map(item => ...)`とすることで`item`が`{_id: ..., children: ..., name: ...}`となります。
|
|
65
|
+
これを`list`に適用すると、`[ [{...}, {...}], [{...}, {...}], ... ]`と`list`の要素が2つづつ配列に入った配列になります。そして`list_by_2.map(items => ...)`の`items`は`[{...}, {...}]`となりますから、再び`items.map(item => ...)`とすることで`item`が`{_id: ..., children: ..., name: ...}`となります。
|
|
64
66
|
|
|
65
67
|
|
|
66
68
|
|
1
誤字修正
test
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
`xs.map(f)`は配列`xs`のすべての要素に対して関数`f`を適用した結果の配列を返します。
|
|
2
2
|
|
|
3
|
-
言い換えれば、`xs`のすべての要素に対して`f(xs[0])`, `f(xs[1])`, ...と適用した結果の配列を返します。
|
|
3
|
+
言い換えれば、`xs`のすべての要素に対して`f(xs[0])`, `f(xs[1])`, ...と適用した結果の配列を返します。
|
|
4
|
+
|
|
5
|
+
具体的には、以下のように使います。
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
|