Warning: Each child in a list should have a unique "key" prop

[AlexZeitler]

My react app looks like this:

import React from "react";
import "./App.css";
import { Client, Resource } from "ketting";
import { KettingProvider, useCollection, useResource } from "react-ketting";
const client = new Client("http://localhost:5000/");

export type Customer = {
  customerId: string;
  name: string;
};

const CustomersView = () => {
  const { loading, error, items } = useCollection<Customer>("/customers");
  if (loading) return <p>Loading...</p>;
  if (error) return <div className="error">{error.message}</div>;
  console.log("items", items);

  return (
    <ul>
      {items.map((item) => (
        <CustomerView resource={item} />
      ))}
    </ul>
  );
};

function CustomerView({ resource }: { resource: Resource<Customer> }) {
  const { loading, error, data } = useResource(resource);

  if (loading) return <div>loading...</div>;
  if (error) return <div className="error">boo</div>;

  return (
    <li>
      {data.customerId} - {data.name}
    </li>
  );
}

export function App() {
  return (
    <KettingProvider client={client}>
      <CustomersView></CustomersView>
    </KettingProvider>
  );
}

export default App;

Everything works but react throws a warning at runtime:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CustomersView`. See https://reactjs.org/link/warning-keys for more information.
CustomerView@http://localhost:3000/src/App.tsx?t=1618102718401:69:22

The warning refers to this block

<ul>
      {items.map((item) => (
        <CustomerView resource={item} />
      ))}
 </ul>

I know I need to e.g. set <CustomerView resource={item} key={<customerId>} /> but I don't have access to the Customer instance here because item is of type Resource<Customer>.

How do I solve this?

[evert]

Every Resource has uri property, so that's an excellent key!

[AlexZeitler]

Yes, that's even better, thanks!