fix: chips need unique key (#974)

material-components · Jul 18, 2019 · 58408c8 · 58408c8
1 parent 15f64c2
commit 58408c8
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/examples/catalog/src/content/chips/ChipsExample.tsx b/examples/catalog/src/content/chips/ChipsExample.tsx
@@ -53,19 +53,26 @@ class FilterChips extends React.Component {
 class InputChips extends React.Component {
   state = {
     chips: [
-      {label: 'Jane Smith', id: Math.random()},
-      {label: 'John Doe', id: Math.random()},
+      {label: 'Jane Smith', id: this.getUUID('Jane Smith')},
+      {label: 'John Doe', id: this.getUUID('John Doe')},
     ],
   };
 
+  getUUID(label: string) {
+    return (
+      label.replace(/\s/g, '') +
+      Math.random().toString().slice(2)
+    );
+  }
+
   handleKeyDown = (e: any) => {
     const input = e.target;
     const label = input.value;
     if (!!label && e.key === 'Enter') {
       this.setState({
         chips: this.state.chips.concat({
           label,
-          id: Math.random(),
+          id: this.getUUID(label),
         }),
       });
       input.value = '';
@@ -80,10 +87,10 @@ class InputChips extends React.Component {
           <span>type & enter & add</span>
         </label>
         <ChipSet input updateChips={(chips) => this.setState({chips})}>
-          {this.state.chips.map((chip, index) => (
+          {this.state.chips.map((chip) => (
             <Chip
-              id={chip.id + index}
-              key={chip.id + index}
+              id={chip.id}
+              key={chip.id}
               label={chip.label}
               trailingIcon={<MaterialIcon icon='cancel' />}
             />