How to get Json data from a fetch response object (using react router loader with defer)

hi guys im using defer loding the data using loader of react router dom

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

and this is how im using it in my component

function HomePage() {
  const responceData = useLoaderData();

  return (
    <div className={HomeStyles.Container}>
      <FindJob />
      <Suspense fallback={<h2>Loading...</h2>}>
        <Await resolve={responceData.responce}>
          {async (responce) => {
            const data = await responce.json();
            return data.updatedJobs.map((item, key) => {
              return <JobCard key={key} data={item} />;
            });
          }}
        </Await>
      </Suspense>
    </div>
  );
}

function HomePage() {
  const responceData = useLoaderData();

  return (
    <div className={HomeStyles.Container}>
      <FindJob />
      <Suspense fallback={<h2>Loading...</h2>}>
        <Await resolve={responceData.responce}>
          {async (responce) => {
            const data = await responce.json();
            return data.updatedJobs.map((item, key) => {
              return <JobCard key={key} data={item} />;
            });
          }}
        </Await>
      </Suspense>
    </div>
  );
}

in the <Await> im not getting the data as json but as a resolved fetch's responce object so i decided to invoke the json method but im getting error as objects are not valid react children

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to get Json data from a fetch response object (using react router loader with defer)