Uncaught TypeError: Cannot read properties of undefined: React Typescript

Question

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.

hotelDetails look undefined. What is the content of data variable ? — jeremy-denis
– jeremy-denis, Commented Aug 30, 2022 at 6:39
Since you changed the definition of hotelDetails in your question, it's tough to understand what you're asking. You need to take a closer look at data because you're not getting back what you think you are. — abgregs
– abgregs, Commented Aug 30, 2022 at 7:01
Hi guys, Thank you for your inputs. and Yes, data is indeed undefined at the moment. I'll check on it again. Thanks again. — Ced
– Ced, Commented Aug 30, 2022 at 7:15

ChanHyeok-Im · Accepted Answer · 2022-08-30 06:53:17Z

2

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

answered Aug 30, 2022 at 6:53

ChanHyeok-Im

5513 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

abgregs · Accepted Answer · 2022-08-30 07:04:11Z

2

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.

edited Aug 30, 2022 at 7:04

answered Aug 30, 2022 at 6:46

abgregs

1,3851 gold badge10 silver badges20 bronze badges

2 Comments

Ced Over a year ago

Hello @abgregs, Apologies for deleting it abruptly, I deleted it to show my original code, I'm checking on my data now. thank you.

abgregs Over a year ago

No problem, it happens :)

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read properties of undefined: React Typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related