Next.js Discord

Discord Forum

Data Map not rendering on page

Unanswered
Horned oak gall posted this in #help-forum
Open in Discord
Avatar
Horned oak gallOP
Currently I am fetching data, then I want to send this data to a component on the page to be rendered but it isn't displaying.

'use client';

import {useSession} from "next-auth/react";
import getAllReservationsForIdentity from "@/lib/getAllReservationsForIdentity";
import ReservationBuyingPanel from "@/components/ReservationBuyingPanel";

export default function ReservationsPage ({ params }: { params:  { identityId: string, string }}) {

    const { data: session } = useSession();

    let reservationData: Reservation[] = [];
    let reservationSelling: Reservation[] = [];
    let reservationBuying: Reservation[] = [];

    const getReservationsData = async () => {
        reservationData = await getAllReservationsForIdentity(session?.user.identityId, session?.user.backendToken);
        splitReservationData();
        console.log(reservationData);
        console.log(reservationBuying)
        console.log(reservationSelling)
    }
    function splitReservationData() {
        reservationData.forEach((reservation => {
            if (reservation.identity.identityId == session?.user.identityId) {
                reservationBuying.push(reservation);
            } else {
                reservationSelling.push(reservation);
            }
        }))
    }
    getReservationsData();

    return (
        <>
            <div className="px-16">
                <div className="border-2 border-rtBlue px-4 py-4">
                    <div className="my-8 border-2 border-rtBlue">
                        <div className="py-4 px-4">
                            <ul className="grid xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1 gap-10 my-10 px-10 w-full">
                                <ReservationBuyingPanel reservations={reservationBuying}/>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )


}


Component:
type Props = {
    reservations: Reservation[]
}

export default function ReservationBuyingPanel({ reservations }: Props ) {

    const reservationsList = reservations;

    const content = reservationsList.map(reservation => {
        return (
            <>
                <div>Test</div>
                <div>{reservation.reservationId}</div>
            </>
        )
    })

    return content;
}

13 Replies

Avatar
Eurasian Curlew
Try instead of using const content = reservationsList.map() just do something like:
Here's a screenshot instead cause I hate using markdown for code
Image
Avatar
Horned oak gallOP
type Props = {
    reservations: Reservation[]
}

export default function ReservationBuyingPanel({ reservations }: Props ) {

    const reservationsList = reservations;
    console.log(reservationsList[0].reservationId)

    return (
        <>
            {
                reservationsList.map(reservation => (
                    <div key={reservation.reservationId}>
                        <div>{reservation.reservationId}</div>
                    </div>
                ))
            }
        </>
    )
}


Still nothing, I added a console.log on the list and it is undefined
Could this be because since the page is a client component that calls an async await that it's trying to render the ReservationBuyingPanel component before that fetch has finished?
Avatar
Eurasian Curlew
Wait it's a client component that call async/await? I missed that (thanks markdown).

Anyway yeah that is not supported, client components cannot be async/await
you need to lift that data fetch to a server component/route handler/server action, something on the server that passes the data to the client component
Avatar
Horned oak gallOP
So it's a client component that has a func that is async await... this part does show a returned list when console.log'd
Image
I had tried this at first but the issue with doing so is I need to be able to use useSession() from nextauth in order to make the call(for the token to pass the api auth)... which requires a client component
Avatar
Eurasian Curlew
Gotcha, I'm unfamilar with nextauth, they don't have a server-side equivelant?
Usually auth libraries have a way to get the session from both the client and server
Avatar
Horned oak gallOP
So it has a getServerSession(authOptions) but I'm not 100% sure what authOptions is that it wants passed in. I'll try to look up a video on it
Avatar
Eurasian Curlew
Maybe, this could be the issue, you would need to wrap the function inside a useEffect and call it inside that useEffect so that it fetches the data on mount and store the value in state.

Currently you are fetching that data during the SSR of the client component which possibly gets wiped when the component mounts.

However, I do think you should figure out how to fetch this data on the server that is best for you use case, cause they are many options (server components, route handlers, server actions) as I mentioned before
Yeah sounds good.