Changing the behaviour of List

bbc · Sep 28, 2019 · cd24dc9 · cd24dc9
1 parent 84c3ac4
commit cd24dc9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/packages/components/List/index.js b/packages/components/List/index.js
@@ -2,10 +2,11 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import SimpleCard from '../SimpleCard';
 import TranscriptCard from '../TranscriptCard';
+import cuid from 'cuid';
 
 const List = (props) => {
 
-  const [ items, setItems ] = useState(props.items);
+  const [ items, setItems ] = useState([]);
 
   useEffect(() => {
     if (items.length === 0) {
@@ -18,11 +19,12 @@ const List = (props) => {
   }, [ props.items ]);
 
   const listItems = items.map((item) => {
+    const key = 'card-' + cuid();
     if (item.display && item.status) {
       return (
         <TranscriptCard
           { ...item }
-          key={ item.key }
+          key={ key }
           handleEditItem={ props.handleEditItem }
           handleDeleteItem={ props.handleDeleteItem }
         />
@@ -32,7 +34,7 @@ const List = (props) => {
       return (
         <SimpleCard
           { ...item }
-          key={ item.key }
+          key={ key }
           handleEditItem={ props.handleEditItem }
           handleDeleteItem={ props.handleDeleteItem }
         />

diff --git a/packages/components/SearchBar/stories/index.stories.js b/packages/components/SearchBar/stories/index.stories.js
@@ -7,8 +7,8 @@ import List from '../../List';
 import SearchBar from '..';
 
 const cardActions = actions({
-  handleEdit: 'Edit button clicked',
-  handleDelete: 'Delete button clicked'
+  handleEditItem: 'Edit button clicked',
+  handleDeleteItem: 'Delete button clicked'
 });
 
 const searchActions = actions({ handleSearch: 'Handle search' });