@@ -18,34 +18,41 @@ const OptionLabel = styled.label.attrs({ className: 'preference__option' })`
1818 font-size: ${ remSize ( 14 ) } !important;
1919` ;
2020
21- const Selector = ( {
21+ const PreferencePicker = ( {
2222 title, value, onSelect, options,
2323} ) => (
2424 < Preference >
2525 < PreferenceTitle > { title } </ PreferenceTitle >
2626 < div className = "preference__options" >
2727 { 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 >
3946 </ React . Fragment > ) ) }
4047 </ div >
4148 </ Preference >
4249) ;
4350
44- Selector . defaultProps = {
51+ PreferencePicker . defaultProps = {
4552 options : [ ]
4653} ;
4754
48- Selector . propTypes = {
55+ PreferencePicker . propTypes = {
4956 title : PropTypes . string . isRequired ,
5057 value : PropTypes . oneOfType ( [ PropTypes . bool , PropTypes . string ] ) . isRequired ,
5158 options : PropTypes . arrayOf ( PropTypes . shape ( {
@@ -57,4 +64,4 @@ Selector.propTypes = {
5764 onSelect : PropTypes . func . isRequired ,
5865} ;
5966
60- export default Selector ;
67+ export default PreferencePicker ;
0 commit comments