From 82ec5207cbc9c4ede0bdd583df734e619e889577 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 1 Jul 2020 17:36:25 -0300
Subject: [PATCH] :ok_hand: fixed warnings

---
 client/components/mobile/Header.jsx           |  2 +-
 client/components/mobile/PreferencePicker.jsx | 37 +++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index 445ef93e..1f7f7a29 100644
--- a/client/components/mobile/Header.jsx
+++ b/client/components/mobile/Header.jsx
@@ -65,7 +65,7 @@ Header.propTypes = {
   title: PropTypes.string,
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
-  children: PropTypes.arrayOf(PropTypes.element),
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   transparent: PropTypes.bool
 };
 
diff --git a/client/components/mobile/PreferencePicker.jsx b/client/components/mobile/PreferencePicker.jsx
index 2c236f4c..0e2e085a 100644
--- a/client/components/mobile/PreferencePicker.jsx
+++ b/client/components/mobile/PreferencePicker.jsx
@@ -18,34 +18,41 @@ const OptionLabel = styled.label.attrs({ className: 'preference__option' })`
   font-size: ${remSize(14)} !important;
 `;
 
-const Selector = ({
+const PreferencePicker = ({
   title, value, onSelect, options,
 }) => (
   <Preference>
     <PreferenceTitle>{title}</PreferenceTitle>
     <div className="preference__options">
       {options.map(option => (
-        <React.Fragment><input
-          type="radio"
-          onChange={() => onSelect(option.value)}
-          aria-label={option.ariaLabel}
-          name={option.name}
-          key={option.id}
-          id={option.id}
-          className="preference__radio-button"
-          value={option.value}
-          checked={value === option.value}
-        /><OptionLabel htmlFor={option.id} >{option.label}</OptionLabel>
+        <React.Fragment key={`${option.name}-${option.id}`} >
+          <input
+            type="radio"
+            onChange={() => onSelect(option.value)}
+            aria-label={option.ariaLabel}
+            name={option.name}
+            key={`${option.name}-${option.id}-input`}
+            id={option.id}
+            className="preference__radio-button"
+            value={option.value}
+            checked={value === option.value}
+          />
+          <OptionLabel
+            key={`${option.name}-${option.id}-label`}
+            htmlFor={option.id}
+          >
+            {option.label}
+          </OptionLabel>
         </React.Fragment>))}
     </div>
   </Preference>
 );
 
-Selector.defaultProps = {
+PreferencePicker.defaultProps = {
   options: []
 };
 
-Selector.propTypes = {
+PreferencePicker.propTypes = {
   title: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({
@@ -57,4 +64,4 @@ Selector.propTypes = {
   onSelect: PropTypes.func.isRequired,
 };
 
-export default Selector;
+export default PreferencePicker;