added keys to looped items

src/components/root/common/Functionality/UnorderedList.js

@@ -5,11 +5,11 @@ export function UList(props) {
     <div>
       <ul>
         {props.listItems.map((item) => (
-          <li liClass="white-text" className={props.liClass}>
+          <li liclass="white-text" className={props.liclass} key={item}>
             {item}
           </li>
         ))}
       </ul>
     </div>
   );
-}
+}

src/components/root/common/Tables/CompTable.js

@@ -14,7 +14,6 @@ import ToolkitProvider, {
 const CompTable = (props) => {
   const [list, setList] = useState([]);
   const [loading, setLoading] = useState(false);
-
   const { SearchBar } = Search;
   const { ExportCSVButton } = CSVExport;
   const sizePerPageRenderer = ({
@@ -107,7 +106,6 @@ const CompTable = (props) => {
       ),
     },
     { dataField: "booked_date", text: "Booked Date", sort: true },
-    // { dataField: "booked_time", text: "Booked Time", sort: true },
     { dataField: "agent_booked", text: "Agent initials", sort: true },
     {
       dataField: "domain",
@@ -120,9 +118,7 @@ const CompTable = (props) => {
     { dataField: "migration_type", text: "Type", sort: true },
     { dataField: "original_server", text: "Original Server", sort: true },
     { dataField: "new_server", text: "New Server", sort: true },
-    // { dataField: "term_date", text: "Termination Date", sort: true },
     { dataField: "notes", text: "Notes", sort: true },
-    // { dataField: "submit_time", text: "Submit Time", sort: true },
   ];
 
   useEffect(() => {
@@ -130,7 +126,7 @@ const CompTable = (props) => {
   }, []);
 
   return (
-    <div className="HistoricalSingle">
+    <div>
       {loading ? (
         <ToolkitProvider
           keyField="name"
@@ -138,12 +134,13 @@ const CompTable = (props) => {
           columns={columns}
           search
           exportCSV
+          key={columns.id}
         >
           {(props) => (
             <div>
               <div className="serSec">
                 <h3 className="hdrOne"></h3>
-                <SearchBar {...props.searchProps} />
+                <SearchBar {...props.searchProps} key={columns} />
               </div>
 
               <div className="table-responsive">
@@ -154,9 +151,10 @@ const CompTable = (props) => {
                   striped
                   hover
                   condensed
+                  key={columns.id}
                 />
               </div>
-              <ExportCSVButton {...props.csvProps}>
+              <ExportCSVButton {...props.csvProps} key={columns}>
                 Export CSV!!
               </ExportCSVButton>
             </div>