CODEWITHSUNDEEP
javascriptreactjstypescriptgraphql
Ced
Ced

Reputation: 29

Uncaught TypeError: Cannot read properties of undefined: React Typescript

I'm working on fetching data with React and graphql and render it with react/pdf-renderer.

I use renderContent but it gives me this error. What I'm doing wrong?

Uncaught TypeError: Cannot read properties of undefined (reading 'bookingConfirmationNumber')at renderContent

Below is my code

const renderContent = () => {
    const hotelDetails: HotelDetailsType = data.getHotelDetailsByIds.items[0]

    return (
      <PDFViewer>
        <Document>
          console.log(hotelDetails.bookingConfirmationNumber)
          <Page>

            <View>
                <Text>{hotelDetails.bookingConfirmationNumber}</Text>
                <Text>{hotelDetails.hotelName}</Text>
                <Text>{hotelDetails.address}</Text>
                <Text>{hotelDetails.hotelContactNumber}</Text>
                <Text>{hotelDetails.guestName}</Text>
                <Text>{hotelDetails.guests.adults}</Text>
                <Text>{hotelDetails.guests.children}</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>      
  )}

Here is my schema

export type HotelDetailsType = {
  bookingConfirmationNumber: string
  hotelName: string
  address: string
  hotelContactNumber: string
  guestName: string
  guests: HotelGuestsType
}

I tried optional chaining, it renders the PDF component but data were not being fetched and Query is working fine in Graphql. Any inputs and resource to read on is highly appreciated.

Thank you.

Update:

hotelDetails is indeed sending undefined. But I still can't figure out why. If I query directly in graphql it is working. Please see below additional info.

const InvoicePDFModal: React.FC<InvoicePDFModalProps> = ({ hideModal, hotelBookingId }) => {
  const profile = useSelector(selectedCustomerProfileSelector)
  const { data, loading, error } = useQuery(GET_HOTEL_DETAILS_BY_IDS, {
    variables: {
      hotelDetailIds: [hotelBookingId],
      customerId: profile.userId
    }
  })

Graphql snip https://i.sstatic.net/Im9z0.jpg

I really appreciate the help guys. Thank you so much.

Upvotes: 1

Views: 781

Answers (2)

abgregs
abgregs

Reputation: 1380

hotelDetails is resulting in undefined simply because data.getHotelDetailsByIds.items[0] (and data.getHotelDetailsByIds in the previous version of your question) is undefined. When you inspect data, you should see the issue.

Upvotes: 2

ChanHyeok-Im
ChanHyeok-Im

Reputation: 551

It looks like data.getHotelDetailsByIds returns empty array. So, data.getHotelDetailsByIds.item[0] is undefined.

Upvotes: 2

Related Questions