Why is my session storage variable 'header' Null

Question

I am trying to create a pdf using react-pdf. In App.js I store my 'header' info in Session Storage. My current Invoice component:

import React from 'react';
import { Page, Document, Image, StyleSheet } from '@react-pdf/renderer';
import InvoiceTitle from './InvoiceTitle'
import BillTo from './BillTo'
import InvoiceNo from './InvoiceNo'
import InvoiceItemsTable from './InvoiceItemsTable'
import InvoiceThankYouMsg from './InvoiceThankYouMsg'

const styles = StyleSheet.create({
    page: {
        fontFamily: 'Helvetica',
        fontSize: 11,
        paddingTop: 30,
        paddingLeft: 60,
        paddingRight: 60,
        lineHeight: 1.5,
        flexDirection: 'column',
    },
    logo: {
        width: 74,
        height: 66,
        marginLeft: 'auto',
        marginRight: 'auto'
    }
});

const headerString = sessionStorage.getItem("header");
const header = JSON.parse(headerString);

const Invoice = ({ invoice }) => (
    <Document>
        <Page size="A4" style={styles.page}>
            <Image style={styles.logo} src={header.logoImage} /> <<== Error on this line
            <InvoiceTitle title='Invoice' />
            <InvoiceNo invoice={invoice} />
            <BillTo invoice={invoice} />
            <InvoiceItemsTable invoice={invoice} />
            <InvoiceThankYouMsg />
        </Page>
    </Document>
);

export default Invoice

I am getting an error that header is null, even though I can see it in my Dev Tools under Session Storage. Why is header Null?

UPDATE

If I refresh {F5} the page everything loads ok.

score 0 · Accepted Answer · answered Aug 12 '21 at 20:00

I just avoid the problem by passing in the header object.

const Invoice = ({ invoice, header }) => (
    <Document>
        <Page size="A4" style={styles.page}>
            <Image style={styles.logo} src={{ data: "image/png;base64," + header.logoImage}} />
            <InvoiceTitle title='Invoice' />
            <InvoiceNo invoice={invoice} />
            <BillTo invoice={invoice} />
            <InvoiceItemsTable invoice={invoice} />
            <InvoiceThankYouMsg />
        </Page>
    </Document>
);

Why is my session storage variable 'header' Null

1 Answers1