Fix many React warnings

src/components/map/FeatureLayerPopup.jsx

@@ -16,12 +16,6 @@ const Panel = (props) => {
   }}>{props.children}</div>
 }
 
-function renderFeature(feature) {
-  return <div>
-    <Panel>{feature.layer['source-layer']}</Panel>
-  </div>
-}
-
 function groupFeaturesBySourceLayer(features) {
   const sources = {}
   features.forEach(feature => {
@@ -52,7 +46,7 @@ class FeatureLayerPopup extends React.Component {
           {feature.layer.id}
         </label>
       })
-      return <div>
+      return <div key={vectorLayerId}>
         <Panel>{vectorLayerId}</Panel>
         {layers}
       </div>

src/components/map/FeaturePropertyPopup.jsx

@@ -5,11 +5,20 @@ import StringInput from '../inputs/StringInput'
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
 
+function displayValue(value) {
+  if (typeof value === 'undefined' || value === null) return value;
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === 'object' ||
+          typeof value === 'number' ||
+          typeof value === 'string') return value.toString();
+  return value;
+}
+
 function renderProperties(feature) {
   return Object.keys(feature.properties).map(propertyName => {
     const property = feature.properties[propertyName]
-    return <InputBlock label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
-      <StringInput value={property} style={{backgroundColor: 'transparent'}}/>
+    return <InputBlock key={propertyName} label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
+      <StringInput value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
     </InputBlock>
   })
 }
@@ -24,7 +33,7 @@ const Panel = (props) => {
 }
 
 function renderFeature(feature) {
-  return <div>
+  return <div key={feature.id}>
     <Panel>{feature.layer['source-layer']}</Panel>
     {renderProperties(feature)}
   </div>