React Displaying Undesired Values

I have a component that is displaying null or undefined shortly before a value is available in the component. I was able to get around this by instead initializing the value as an empty string rather than null or undefined. I am new to react so there may be a better way to go about this but here is the component:

export default function PageHeader(props) {
    return (
        <header>   
            <span>{"AppName"}</span>
            {props.pages.map((page, index) => 
                <span key={index}>{" / " + page}</span>;
            )}
        </header>
    );
}

pages is an array of values to build a pseudo path (or so we'll call it)

The component is used like so:

        <PageHeader 
            pages={["Home"]}
        />

The component can accept variables as well

        <PageHeader 
            pages={["Blog Posts", variable]}
        />

The variable would be what is displaying with null or undefined

from Recent Questions - Stack Overflow https://ift.tt/3qUdL43
https://ift.tt/eA8V8J