How to avoid React warning-keys?

[toiroakr]

The following code will throw an error saying that there is no unique key for the div.
How to avoid the error?

export default function Home() {
  const query = useQuery();
  return (
    <div>
      {query.allFilms()?.films?.map((film) => (
        <div key={film?.id}>
          <p>title: {film?.title}</p>
          <p>director: {film?.director}</p>
        </div>
      ))}
    </div>
  );
}

Full code is here.

error:

Each child in a list should have a unique "key" prop.
Check the render method of `Home`. See https://react.dev/link/warning-keys for more information.

[vicary]

GQty renders a first time with undefined to capture your GraphQL selections before fetching, assuming no sane person would use 0 as an id you may always to this:

<div>
  {query.allFirms()?.films?.map((film) => (
-   <div key={film?.id}>
+   <div key={film?.id ?? 0}>
    </div>
  )}
</div>

[toiroakr]

@vicary
Thanks! It works.