Fix warnings

src/components/atoms/ColoredMarkers.js

@@ -39,6 +39,7 @@ function ColoredMarkers({ radius, colorPercentMap, styles, className }) {
 
         return (
           <path
+            key={`arc_${idx}`}
             className={className}
             id={`arc_${idx}`}
             d={arc}

src/components/controls/CardStack.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import {
-  Card,
   generateCardLayout,
+  Card,
 } from "@forensic-architecture/design-system/dist/react";
 
 import * as selectors from "../../selectors";
@@ -28,8 +28,8 @@ class CardStack extends React.Component {
   scrollToCard() {
     const duration = 500;
     const element = this.refCardStack.current;
-    const cardScroll = this.refs[this.props.narrative.current].current
-      .offsetTop;
+    const cardScroll =
+      this.refs[this.props.narrative.current].current.offsetTop;
 
     const start = element.scrollTop;
     const change = cardScroll - start;
@@ -70,15 +70,18 @@ class CardStack extends React.Component {
       const thisRef = React.createRef();
       this.refs[idx] = thisRef;
 
+      const content = generateTemplate({
+        event,
+        colors: this.props.colors,
+        coloringSet: this.props.coloringSet,
+        getFilterIdxFromColorSet,
+      });
+
       return (
         <Card
           ref={thisRef}
-          content={generateTemplate({
-            event,
-            colors: this.props.colors,
-            coloringSet: this.props.coloringSet,
-            getFilterIdxFromColorSet,
-          })}
+          key={idx}
+          content={content}
           language={this.props.language}
           isLoading={this.props.isLoading}
           isSelected={selections[idx]}

src/components/space/carto/atoms/Clusters.js

@@ -133,11 +133,12 @@ function ClusterEvents({
       <svg>
         <g className="cluster-locations">
           {isRadial ? <DefsClusters /> : null}
-          {clusters.map((c) => {
+          {clusters.map((c, idx) => {
             const pointCount = c.properties.point_count;
             const clusterSize = calcClusterSize(pointCount, totalPoints);
             return (
               <Cluster
+                key={idx}
                 onClick={onSelect}
                 getClusterChildren={getClusterChildren}
                 coloringSet={coloringSet}

src/components/space/carto/atoms/Events.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Portal } from "react-portal";
 import colors from "../../../../common/global";
 import ColoredMarkers from "../../../atoms/ColoredMarkers";
+import hash from "object-hash";
 import {
   calcOpacity,
   calculateColorPercentages,
@@ -102,7 +103,7 @@ function MapEvents({
     }, false);
 
     return (
-      <svg>
+      <svg key={hash(location)}>
         <g
           className={`location-event ${narrative ? "no-hover" : ""}`}
           transform={`translate(${x}, ${y})`}

src/components/time/atoms/Events.js

@@ -6,6 +6,7 @@ import DatetimeTriangle from "./DatetimeTriangle";
 import DatetimePentagon from "./DatetimePentagon";
 import Project from "./Project";
 import ColoredMarkers from "../../atoms/ColoredMarkers";
+import hash from "object-hash";
 import {
   calcOpacity,
   getEventCategories,
@@ -23,6 +24,7 @@ function renderDot(event, styles, props) {
   );
   return (
     <g
+      key={hash(event)}
       className="timeline-event"
       onClick={props.onSelect}
       transform={`translate(${props.x}, ${props.y})`}
@@ -232,6 +234,7 @@ const TimelineEvents = ({
         <>
           {Object.values(projects).map((project) => (
             <Project
+              key={project.id}
               {...project}
               eventRadius={eventRadius}
               onClick={() => console.log(project)}