Function List

example/withSuspense/Firestore.tsx:50–80

({ query, removeAnimal })

};

const List = ({ query, removeAnimal }) => {
  const { data: animals } = useFirestoreCollectionData(query, { idField: 'id' });
  return (
    <>
      <div className="h-20 overflow-x-scroll shadow-inner m-2 border border-black">
        <ul>
          {(animals as Array<{ id: string; commonName: string }>).map((animal) => (
            <li key={animal.id}>
              {animal.commonName} <button onClick={() => removeAnimal(animal.id)}>X</button>
            </li>
          ))}
        </ul>
      </div>
      <ul>
        {Array.from(
          (animals as any[]).reduce((animalCountMap, animal) => {
            const currentCount = animalCountMap.get(animal.commonName) ?? 0;
            return animalCountMap.set(animal.commonName, currentCount + 1);
          }, new Map<string, number>())
        ).map((animalStat) => {
          const [animalName, animalCount] = (animalStat as [string, number]);
          return (
            <li key={animalName}>
              {animalName}: {animalCount}
            </li>
          );
        })}
      </ul>
    </>
  );
};

const FavoriteAnimals = (props) => {
  const firestore = useFirestore();