CommunicationList.tsx

function CommunicationList() {
  const [communications, setCommunications] = useState<Communication[] | null>(
    null
  );

  useEffect(() => {
    fetch("/communications")
      .then((res) => res.json())
      .then(setCommunications);
  }, []);

  if (!communications) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {communications.map((communication) => (
        <li key={communication.id}>{communication.name}</li>
      ))}
    </ul>
  );
}