Here is the code snippet
export default function DisplaySearchResults({ results }) {
var arr = Object.entries(results)
console.log(arr)
return (
<div>
Here are the search results :
<ol>
{arr.map((value, index) => {
<li key={index}>{value.title}</li>
})}
</ol>
</div>
);
}
export async function getServerSideProps({ params }) {
const { id } = params;
const response = await fetch(
`http://localhost:4000/data/${id}`
);
const results = await response.json();
return {
props: { results } // will be passed to the page component as props
};
}
At this point:
console.log(arr)
This line prints an array with 100 subarrays retrieved from the API...
The data in the array looks like this:
[["0", {title: "I like pizza", textValue: "Yes, I do"}], ["1", {title: "I like burgers", textValue: "Yes, I do"}]]However, on the page, only an empty list <ol></ol> is displayed with no content inside.
I am currently trying to determine the reason behind this issue...