Suspense API Challenge solution

gistfile1.txt

import { Suspense, useState } from 'react';

const SuspensefulUserProfile = ({ userId }) => {

  const resource = fetchUserProfile(userId);

  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <UserProfile data={resource} />
    </Suspense>
  );
};

const UserProfile = ({ data }) => {

  const name = data.name.read()
  const email = data.email.read()
  return (
    <>
      <h1>{name}</h1>
      <h2>{email}</h2>
    </>
  );
};

const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);