Return, object property "undefined" "Cannot GET /src/html/undefined" on a Link

within the return statement there is a link element that has an object property as its value/href. This link is wrapped around each item in my array. When the link is clicked "Cannot GET /src/html/undefined"

   const displayMovies = (Movies) => {
    const htmlString = Movies
        .map((item) => {
            return `
            <div class="Media-Card">
                <a href='${item.page}'><img class='Poster' src="${item.poster}" ></img></a>
                <h1 class='Media-Card-Header'>${item.title}</h1>
            </div>
        `;
        })
        .join('');
    searchlist.innerHTML = htmlString;
};

Within my object class, I have declared and assigned a value for href.

   this.page = page;

It seems that the page property of your objects in the Movies array is either not correctly assigned or is undefined at the time the function is called. Here's how to troubleshoot and resolve the issue:

Steps to Resolve the Issue:

1. Verify Object Structure:

Ensure each object in the Movies array has a page property with a valid value (e.g., a string representing the href). Example:

const Movies = [
{
    title: 'Inception',
    poster: '/path/to/poster.jpg',
    page: '/details/inception'
},
{
    title: 'Interstellar',
    poster: '/path/to/poster2.jpg',
    page: '/details/interstellar'
}];

2. Check Constructor Assignment:

If Movies is being generated dynamically via a class, verify that the page property is assigned properly in the constructor:

class Movie {
    constructor(title, poster, page) {
        this.title = title;
        this.poster = poster;
        this.page = page;
    }
}

3. Handle Missing or Undefined Properties:

Add a fallback for the page property in case it is undefined or null. For example, you can provide a default value:

<a href='${item.page || "#"}'>

For debugging use console.log() to check the values of page in your Movies array before mapping.

Updated Code:

Below is the corrected and enhanced version of your code:

const displayMovies = (Movies) => {
    const htmlString = Movies
        .map((item) => {
            const href = item.page || "#";
            return `
            <div class="Media-Card">
                <a href='${href}'><img class='Poster' src="${item.poster}" alt="${item.title} Poster"></a>
                <h1 class='Media-Card-Header'>${item.title}</h1>
            </div>
        `;
        })
        .join('');
    searchlist.innerHTML = htmlString;
};

If this doesn't resolve your issue, ensure that your paths are correct and that the href values are pointing to valid resources.