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;
2
Answers
use destructuring of the object
And also check with the dev tools on Brower by
ctrl+shift+i
for proper availability of link.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:
Ensure each object in the Movies array has a page property with a valid value (e.g., a string representing the href).
Example:
If Movies is being generated dynamically via a class, verify that the page property is assigned properly in the constructor:
Add a fallback for the page property in case it is undefined or null. For example, you can provide a default value:
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:
If this doesn’t resolve your issue, ensure that your paths are correct and that the href values are pointing to valid resources.