回答編集履歴

2

テキスト追加

2021/12/17 13:58

投稿

退会済みユーザー
test CHANGED
@@ -101,3 +101,131 @@
101
101
   ・`name` プロパティを使って、` 関東エリア(kantoArea)`の部分の<span>を作り、
102
102
 
103
103
   ・`prefectures`プロパティを mapで展開してそのエリアが含む都道府県の各<span>を作ります。
104
+
105
+
106
+
107
+
108
+
109
+ ### 追記
110
+
111
+
112
+
113
+ 以下は、上記の考え方によるコードの一例です。`groupByArea`という関数によって、エリアごとにグルーピングした配列を作成します。
114
+
115
+
116
+
117
+ ```jsx
118
+
119
+ const areaNames = {
120
+
121
+ kanto: '関東エリア',
122
+
123
+ chubu: '中部エリア',
124
+
125
+ kansai: '関西エリア',
126
+
127
+ };
128
+
129
+
130
+
131
+ const datas = JSON.parse(`[
132
+
133
+ { "name": "東京", "area": "kanto" },
134
+
135
+ { "name": "千葉", "area": "kanto" },
136
+
137
+ { "name": "神奈川", "area": "kanto" },
138
+
139
+ { "name": "愛知", "area": "chubu" },
140
+
141
+ { "name": "岐阜", "area": "chubu" },
142
+
143
+ { "name": "大阪", "area": "kansai" },
144
+
145
+ { "name": "兵庫", "area": "kansai" },
146
+
147
+ { "name": "京都", "area": "kansai" }
148
+
149
+ ]`);
150
+
151
+
152
+
153
+ const groupByArea = prefectureDatas =>
154
+
155
+ prefectureDatas.reduce((ary, { name, area }, i) => {
156
+
157
+ const last = ary.length > 0 ? ary[ary.length-1] : null;
158
+
159
+ if (!last || last.area !== area)
160
+
161
+ ary.push({ area, prefectures: [name] });
162
+
163
+ else
164
+
165
+ last.prefectures.push(name);
166
+
167
+ return ary;
168
+
169
+ }, []);
170
+
171
+
172
+
173
+
174
+
175
+ const Prefecture = ({ name }) => (
176
+
177
+ <span className="prefecture">{name}</span>
178
+
179
+ );
180
+
181
+
182
+
183
+ const Area = ({ data: { area, prefectures }}) => (
184
+
185
+ <div className="area-box">
186
+
187
+ <span className="area">{areaNames[area]}</span>
188
+
189
+ {prefectures.map(pref => <Prefecture key={pref} name={pref} /> )}
190
+
191
+ </div>
192
+
193
+ );
194
+
195
+
196
+
197
+ const App = () => {
198
+
199
+ const areaDatas = groupByArea(datas);
200
+
201
+ console.log(areaDatas);
202
+
203
+
204
+
205
+ return (
206
+
207
+ <div>
208
+
209
+ {areaDatas.map(data => <Area key={data.area} data={data} />)}
210
+
211
+ </div>
212
+
213
+ );
214
+
215
+ }
216
+
217
+
218
+
219
+
220
+
221
+ const rootElement = document.getElementById("root");
222
+
223
+ ReactDOM.render(<App />, rootElement);
224
+
225
+
226
+
227
+ ```
228
+
229
+
230
+
231
+ - codepen ???? [tera: 374247#2](https://codepen.io/kilesa/pen/RwLVjbR?editors=0111)

1

テキスト修正

2021/12/17 13:58

投稿

退会済みユーザー
test CHANGED
@@ -76,15 +76,15 @@
76
76
 
77
77
 
78
78
 
79
- (3) 上記の`area`ごとにグルーピングした配列を`map` して、mapに与える関数の引数名を`area`とします。
79
+ (3) 上記の`area`ごとにグルーピングした配列を`map` して、mapに与える関数の引数名を仮に`data`とします。`data` は `area`と `prefectures`を持つオブジェクトです。
80
80
 
81
81
 
82
82
 
83
- (4) (3)の各`area` をpropとして受け取るコンポーネントを 例えば
83
+ (4) (3)の各`data` をpropとして受け取るコンポーネントを 例えば
84
84
 
85
85
 
86
86
 
87
- `<Area data={area} />`
87
+ `<Area data={data} />`
88
88
 
89
89
 
90
90
 
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- (5) `Area` コンポーネントの中では、prop `data`で渡される `area`
97
+ (5) `Area` コンポーネントの中では、prop `data`の
98
98
 
99
99
 
100
100