回答編集履歴
2
id -> key に訂正
test
CHANGED
|
@@ -112,11 +112,11 @@
|
|
|
112
112
|
|
|
113
113
|
{fields.map(field =>
|
|
114
114
|
|
|
115
|
-
<select
|
|
115
|
+
<select key={field.key} onChange={e => updateFilter(field.key, e.target.value)}>
|
|
116
116
|
|
|
117
117
|
{field.options.map(value =>
|
|
118
118
|
|
|
119
|
-
<option
|
|
119
|
+
<option key={value} value={value}>{value}</option>
|
|
120
120
|
|
|
121
121
|
)}
|
|
122
122
|
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
|
|
165
165
|
|
|
166
166
|
|
|
167
|
-
追記。allData の生成もコードででき
|
|
167
|
+
追記。allData の生成もコードでできて、field が増えても対応可能ですが、ベタ書きの方がわかりやすいですね。
|
|
168
168
|
|
|
169
169
|
|
|
170
170
|
|
1
追記
test
CHANGED
|
@@ -157,3 +157,23 @@
|
|
|
157
157
|
export default App;
|
|
158
158
|
|
|
159
159
|
```
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
追記。allData の生成もコードでできますが、ベタ書きの方がわかりやすいですね。
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
```js
|
|
172
|
+
|
|
173
|
+
const allData = fields.reduce((acc, field) => acc.flatMap(row =>
|
|
174
|
+
|
|
175
|
+
field.options.map(value => ({ ...row, [field.key]: value })
|
|
176
|
+
|
|
177
|
+
)), [{}]).map((row, index) => ({ ...row, id: index }));
|
|
178
|
+
|
|
179
|
+
```
|