reactjs - React Displaying Undesired Values

Question

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

question from:https://stackoverflow.com/questions/65910948/react-displaying-undesired-values

Answer 1

You can do some simple checking like so

props.pages.map((page, index) => page ? <span key={index}>{" / " + page}</span> : null)

One small note is that it is not recommended to use index as key. Read document detail for more information