#Data Map not rendering on page

14 messages · Page 1 of 1 (latest)

viscid vessel
#

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.


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;

}```

digital parrotBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

gentle dagger
#

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.png
viscid vessel
# gentle dagger Try instead of using `const content = reservationsList.map()` just do something ... 
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?

gentle dagger
#

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

viscid vessel
#

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.png
viscid vessel
gentle dagger
#

Usually auth libraries have a way to get the session from both the client and server

viscid vessel
gentle dagger
# viscid vessel Could this be because since the page is a client component that calls an async a...

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