回答編集履歴

3

a

2018/03/16 01:35

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  render() {
36
36
 
37
- const sizeList = [
37
+ const sizes = [
38
38
 
39
39
  { id: 'aaa' },
40
40
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  ]
46
46
 
47
- return <SizeContainer sizeList={sizeList} />
47
+ return <SizeContainer sizes={sizes} />
48
48
 
49
49
  }
50
50
 
@@ -86,17 +86,13 @@
86
86
 
87
87
  render() {
88
88
 
89
- const {
90
-
91
- sizeList
92
-
93
- } = this.props;
89
+ const { sizes } = this.props;
94
90
 
95
91
 
96
92
 
97
93
  return (
98
94
 
99
- sizeList.map((size) => {
95
+ sizes.map((size) => {
100
96
 
101
97
  return (
102
98
 
@@ -152,4 +148,6 @@
152
148
 
153
149
  render(<App />, document.getElementById('root'));
154
150
 
151
+
152
+
155
153
  ```

2

2018/03/16 01:35

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -1,4 +1,12 @@
1
1
  ![イメージ説明](df0389ffbb5255185fa9aa4b451dd533.gif)
2
+
3
+
4
+
5
+ 上位のコンポーネントにどのボタンが今、選択されているかのstateを持たせるのがポイントになってきます。
6
+
7
+
8
+
9
+ 4,5パターンくらい実装方法がありそうですが、一番基礎的なやり方で、かつ、掲載されているコードを元にする方法だと、以下のような感じになると思います。
2
10
 
3
11
 
4
12
 

1

a

2018/03/16 01:22

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -14,9 +14,33 @@
14
14
 
15
15
  ```
16
16
 
17
- import React, { Component, Fragment } from 'react';
17
+ import React, { Component } from 'react';
18
18
 
19
19
  import { render } from 'react-dom';
20
+
21
+
22
+
23
+ class App extends Component {
24
+
25
+
26
+
27
+ render() {
28
+
29
+ const sizeList = [
30
+
31
+ { id: 'aaa' },
32
+
33
+ { id: 'bbb' },
34
+
35
+ { id: 'ccc' }
36
+
37
+ ]
38
+
39
+ return <SizeContainer sizeList={sizeList} />
40
+
41
+ }
42
+
43
+ }
20
44
 
21
45
 
22
46
 
@@ -54,47 +78,35 @@
54
78
 
55
79
  render() {
56
80
 
81
+ const {
82
+
83
+ sizeList
84
+
85
+ } = this.props;
86
+
87
+
88
+
57
89
  return (
58
90
 
59
- <Fragment>
91
+ sizeList.map((size) => {
60
92
 
61
- <SizeButton
93
+ return (
62
94
 
63
- key='aaa'
95
+ <SizeButton
64
96
 
65
- id='aaa'
97
+ key={size.id}
66
98
 
67
- isSelected={this.state.selectedButtonId === 'aaa'}
99
+ id={size.id}
68
100
 
69
- onClick={this.handleButtonClick}
101
+ isSelected={this.state.selectedButtonId === size.id}
70
102
 
71
- />
103
+ onClick={this.handleButtonClick}
72
104
 
73
- <SizeButton
105
+ />
74
106
 
75
- key='bbb'
107
+ )
76
108
 
77
- id='bbb'
78
-
79
- isSelected={this.state.selectedButtonId === 'bbb'}
80
-
81
- onClick={this.handleButtonClick}
82
-
83
- />
109
+ })
84
-
85
- <SizeButton
86
-
87
- key='ccc'
88
-
89
- id='ccc'
90
-
91
- isSelected={this.state.selectedButtonId === 'ccc'}
92
-
93
- onClick={this.handleButtonClick}
94
-
95
- />
96
-
97
- </Fragment>
98
110
 
99
111
  )
100
112
 
@@ -130,6 +142,6 @@
130
142
 
131
143
 
132
144
 
133
- render(<SizeContainer />, document.getElementById('root'));
145
+ render(<App />, document.getElementById('root'));
134
146
 
135
147
  ```