👻Ghost in Your pants👻 Posts

👻Ghost in Your pants👻

Posts Comments

KPCKevin Powell - Community

•Created by 👻Ghost in Your pants👻 on 3/20/2024 in #front-end

position absolute element is underneath other element

22 replies

KPCKevin Powell - Community

•Created by 👻Ghost in Your pants👻 on 1/25/2024 in #front-end

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

1 replies

KPCKevin Powell - Community

•Created by 👻Ghost in Your pants👻 on 1/18/2024 in #front-end

Flex container's item heights not working