Fix many React warnings

src/components/fields/SpecField.jsx

@@ -76,6 +76,7 @@ export default class SpecField extends React.Component {
         } else {
           return <SelectInput
             {...commonProps}
+            value={this.props.value || this.props.fieldSpec.default}
             options={options}
           />
         }

src/components/fields/ZoomSpecField.jsx

@@ -182,7 +182,7 @@ export default class ZoomSpecField extends React.Component {
           <DocLabel
             label={<FunctionIcon />}
             cursorTargetStyle={{ cursor: 'pointer' }}
-            doc="Turn property into a zoom function to enable a map feature to change with map's zoom level."
+            doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
           />
         </Button>
         }

src/components/filter/FilterEditor.jsx

@@ -75,9 +75,8 @@ export default class CombiningFilterEditor extends React.Component {
     let filters = filter.slice(1)
 
     const editorBlocks = filters.map((f, idx) => {
-      return <FilterEditorBlock onDelete={this.deleteFilterItem.bind(this, idx)}>
+      return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
         <SingleFilterEditor
-          key={idx}
           properties={this.props.properties}
           filter={f}
           onChange={this.onFilterPartChanged.bind(this, idx + 1)}

src/components/inputs/StringInput.jsx

@@ -5,24 +5,19 @@ class StringInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string,
     style: React.PropTypes.object,
-    default: React.PropTypes.number,
+    default: React.PropTypes.string,
     onChange: React.PropTypes.func,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      value: props.value || ''
     }
   }
 
-  changeValue(newValue) {
-    //TODO: In feature we can try to do validation here as well
-    this.setState({ value: newValue })
-  }
-
   componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
+    this.setState({ value: nextProps.value || '' })
   }
 
   render() {
@@ -33,8 +28,10 @@ class StringInput extends React.Component {
       }}
       value={this.state.value}
       placeholder={this.props.default}
-      onChange={e => this.changeValue(e.target.value)}
-      onBlur={() => this.props.onChange(this.state.value)}
+      onChange={e => this.setState({ value: e.target.value })}
+      onBlur={() => {
+        if(this.state.value) this.props.onChange(this.state.value)
+      }}
     />
   }
 }

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>