working towards feature state with no id

ui/src/components/App.js

@@ -24,7 +24,6 @@ class App extends React.Component {
       activeItem: item
     });
   };
-  onListHighlight = item => {};
   render() {
     return (
       <div>

ui/src/components/Map.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import mapboxgl from 'mapbox-gl';
+// import mapboxgl from 'mapbox-gl';
+// we are using a dev build so we can set feature id's from a string property
+import mapboxgl from '../lib/mapbox-gl';
 import './Map.css';
 import bbox from '@turf/bbox';
 import { featureCollection, feature } from '@turf/helpers';
@@ -19,7 +21,8 @@ class Map extends React.Component {
         data: {
           type: 'FeatureCollection',
           features: []
-        }
+        },
+        promoteId: { original: 'filename' }
       });
 
       this.theMap.addLayer({
@@ -39,14 +42,11 @@ class Map extends React.Component {
 
       this.theMap.on('mouseenter', 'content', e => {
         // Change the cursor style as a UI indicator.
-        const id = e.features[0].id;
-        console.log(id);
+        const feature = e.features[0];
+        console.log(feature);
         // console.log(e.features[0]);
         this.theMap.getCanvas().style.cursor = 'pointer';
-        this.theMap.setFeatureState(
-          { source: 'content', id },
-          { active: true }
-        );
+        this.theMap.setFeatureState(feature, { active: true });
         // this.props.onHighlight(id);
       });
 
@@ -69,7 +69,7 @@ class Map extends React.Component {
     if (images.length) {
       //geojson style
       const features = this.props.images.map(image => {
-        return feature(image.geo.geometry, {}, { id: image.filename });
+        return feature(image.geo.geometry, image);
       });
       console.log(features);