teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【React】情報登録画面のエラー表示を改善したい

編集履歴

質問編集履歴

4

文章訂正

2021/11/02 11:26

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,11 @@
12
12
 
13
13
  **期待する動作**
14
14
 
15
+ components / Questionnaire.js　に出る　
16
+
15
- components / Questionnaire.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
17
+ "TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
18
+
19
+
16
20
 
17
21
  ```
18
22
 

3

文章訂正

2021/11/02 11:26

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -1,17 +1,19 @@
1
1
  ReactでMaterial-UI を使用して、Web フォームを作成しています。
2
2
 
3
+ components / Questionnaire.js　に出る　
4
+
5
+ "TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
6
+
7
+ 色々調べたのですが、どのように実装したら良いかわからない状況で、詰まっています。
8
+
9
+ 何方かアドバイスをお願いします。
10
+
11
+
12
+
13
+ **期待する動作**
14
+
3
15
  components / Questionnaire.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
4
16
 
5
- 色々調べたのですが、どのように実装したら良いかわからない状況で、詰まっています。
6
-
7
- 何方かアドバイスをお願いします。
8
-
9
-
10
-
11
- **期待する動作**
12
-
13
- components / Questionnaire.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
14
-
15
17
  ```
16
18
 
17
19
  25 | };

2

文章訂正

2021/11/02 11:25

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ReactでMaterial-UI を使用して、Web フォームを作成しています。
2
2
 
3
- components / Basic.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
3
+ components / Questionnaire.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
4
4
 
5
5
  色々調べたのですが、どのように実装したら良いかわからない状況で、詰まっています。
6
6
 
@@ -10,7 +10,7 @@
10
10
 
11
11
  **期待する動作**
12
12
 
13
- components / Basic.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
13
+ components / Questionnaire.js　に出る　"TypeError: Cannot read properties of undefined (reading 'filter')"　エラー表示を改善したいです。
14
14
 
15
15
  ```
16
16
 
@@ -280,7 +280,7 @@
280
280
 
281
281
  ```
282
282
 
283
- **src / components /Basic.js**
283
+ **src / components /Questionnaire.js**
284
284
 
285
285
 
286
286
 
@@ -288,6 +288,8 @@
288
288
 
289
289
  import React from "react";
290
290
 
291
+ import Typography from "@mui/material/Typography";
292
+
291
293
  import Radio from "@mui/material/Radio";
292
294
 
293
295
  import RadioGroup from "@mui/material/RadioGroup";
@@ -298,126 +300,76 @@
298
300
 
299
301
  import FormLabel from "@mui/material/FormLabel";
300
302
 
301
- import InputLabel from "@mui/material/InputLabel";
303
+
302
-
304
+
303
- import Select from "@mui/material/Select";
305
+ const Questionnaire = ({ answers, setAnswers }) => {
304
-
305
-
306
-
306
+
307
- const Basic = () => {
307
+ const handleAnswer = (answeredIndex, answer) => {
308
+
309
+ setAnswers(answers.map((e, i) => (i === answeredIndex ? answer : e)));
310
+
311
+ };
308
312
 
309
313
  return (
310
314
 
311
- <>
312
-
313
- <div style={{ textAlign: "center" }}>
314
-
315
- <FormControl component="fieldset">
316
-
317
- <FormLabel component="legend">- 性別 -</FormLabel>
318
-
319
- <RadioGroup row aria-label="gender" name="row-radio-buttons-group">
320
-
321
- <FormControlLabel value="male" control={<Radio />} label="男性" />
322
-
323
- <FormControlLabel value="female" control={<Radio />} label="女性" />
324
-
325
- </RadioGroup>
326
-
327
- </FormControl>
328
-
329
- </div>
330
-
331
- <div style={{ textAlign: "center" }}>
332
-
333
- <FormLabel component="legend">- 生年月日 -</FormLabel>
334
-
335
- <FormControl sx={{ m: 1, minWidth: 120 }}>
336
-
337
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
338
-
339
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
340
-
341
- <option aria-label="None" value="" />
342
-
343
- <optgroup label="year">
344
-
345
- {Array.from(Array(2020), (_, num) => (
346
-
347
- <option key={num} value={num + 1}>
348
-
349
- {num + 1990}
350
-
351
- </option>
352
-
353
- ))}
354
-
355
- </optgroup>
356
-
357
- </Select>
358
-
359
- </FormControl>
360
-
361
- <FormControl sx={{ m: 1, minWidth: 120 }}>
362
-
363
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
364
-
365
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
366
-
367
- <option aria-label="None" value="" />
368
-
369
- <optgroup label="month">
370
-
371
- {Array.from(Array(12), (_, num) => (
372
-
373
- <option key={num} value={num + 1}>
374
-
375
- {num + 1}
376
-
377
- </option>
378
-
379
- ))}
380
-
381
- </optgroup>
382
-
383
- </Select>
384
-
385
- </FormControl>
386
-
387
- <FormControl sx={{ m: 1, minWidth: 120 }}>
388
-
389
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
390
-
391
- <Select native defaultValue="" id="grouped-native-select" label="Grouping">
392
-
393
- <option aria-label="None" value="" />
394
-
395
- <optgroup label="day">
396
-
397
- {Array.from(Array(12), (_, num) => (
398
-
399
- <option key={num} value={num + 1}>
400
-
401
- {num + 1}
402
-
403
- </option>
404
-
405
- ))}
406
-
407
- </optgroup>
408
-
409
- </Select>
410
-
411
- </FormControl>
412
-
413
- </div>
414
-
415
- </>
315
+ <div>
316
+
317
+ <FormControl component="fieldset">
318
+
319
+ {answers
320
+
321
+ .filter((_, i) => i === 0 || answers[i - 1])
322
+
323
+ .map((answer, i) => (
324
+
325
+ <React.Fragment key={i}>
326
+
327
+ <FormLabel component="legend">{Questionnaire[i]}</FormLabel>
328
+
329
+ {answer ? (
330
+
331
+ <Typography>{answer === "yes" ? "はい" : "いいえ"}</Typography>
332
+
333
+ ) : (
334
+
335
+ <RadioGroup
336
+
337
+ row
338
+
339
+ aria-label="gender"
340
+
341
+ name="row-radio-buttons-group"
342
+
343
+ onChange={(_evt, value) => {
344
+
345
+ handleAnswer(i, value);
346
+
347
+ }}
348
+
349
+ >
350
+
351
+ <FormControlLabel value="yes" control={<Radio />} label="はい" />
352
+
353
+ <FormControlLabel value="no" control={<Radio />} label="いいえ" />
354
+
355
+ </RadioGroup>
356
+
357
+ )}
358
+
359
+ </React.Fragment>
360
+
361
+ ))}
362
+
363
+ </FormControl>
364
+
365
+ </div>
416
366
 
417
367
  );
418
368
 
419
369
  };
420
370
 
371
+
372
+
421
- export default Basic;
373
+ export default Questionnaire;
422
-
374
+
423
- ```
375
+ ```

1

文章訂正

2021/11/02 11:25

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -280,7 +280,7 @@
280
280
 
281
281
  ```
282
282
 
283
- **Basic.js**
283
+ **src / components /Basic.js**
284
284
 
285
285
 
286
286