@@ -18,34 +18,41 @@ const OptionLabel = styled.label.attrs({ className: 'preference__option' })`
18
18
font-size: ${ remSize ( 14 ) } !important;
19
19
` ;
20
20
21
- const Selector = ( {
21
+ const PreferencePicker = ( {
22
22
title, value, onSelect, options,
23
23
} ) => (
24
24
< Preference >
25
25
< PreferenceTitle > { title } </ PreferenceTitle >
26
26
< div className = "preference__options" >
27
27
{ options . map ( option => (
28
- < React . Fragment > < input
29
- type = "radio"
30
- onChange = { ( ) => onSelect ( option . value ) }
31
- aria-label = { option . ariaLabel }
32
- name = { option . name }
33
- key = { option . id }
34
- id = { option . id }
35
- className = "preference__radio-button"
36
- value = { option . value }
37
- checked = { value === option . value }
38
- /> < OptionLabel htmlFor = { option . id } > { option . label } </ OptionLabel >
28
+ < React . Fragment key = { `${ option . name } -${ option . id } ` } >
29
+ < input
30
+ type = "radio"
31
+ onChange = { ( ) => onSelect ( option . value ) }
32
+ aria-label = { option . ariaLabel }
33
+ name = { option . name }
34
+ key = { `${ option . name } -${ option . id } -input` }
35
+ id = { option . id }
36
+ className = "preference__radio-button"
37
+ value = { option . value }
38
+ checked = { value === option . value }
39
+ />
40
+ < OptionLabel
41
+ key = { `${ option . name } -${ option . id } -label` }
42
+ htmlFor = { option . id }
43
+ >
44
+ { option . label }
45
+ </ OptionLabel >
39
46
</ React . Fragment > ) ) }
40
47
</ div >
41
48
</ Preference >
42
49
) ;
43
50
44
- Selector . defaultProps = {
51
+ PreferencePicker . defaultProps = {
45
52
options : [ ]
46
53
} ;
47
54
48
- Selector . propTypes = {
55
+ PreferencePicker . propTypes = {
49
56
title : PropTypes . string . isRequired ,
50
57
value : PropTypes . oneOfType ( [ PropTypes . bool , PropTypes . string ] ) . isRequired ,
51
58
options : PropTypes . arrayOf ( PropTypes . shape ( {
@@ -57,4 +64,4 @@ Selector.propTypes = {
57
64
onSelect : PropTypes . func . isRequired ,
58
65
} ;
59
66
60
- export default Selector ;
67
+ export default PreferencePicker ;
0 commit comments