While fetching data on my main page everything works as expected. However, when trying to fetch data in another folder using the same code but with a dynamic URL, I encounter an error when attempting to use methods on an array. Interestingly, when I console.log the fetched data, it displays the same array as on my main page.
If I remove the Link and only focus on book.title, it works fine. But I face an error when trying to retrieve data from resources.
DataFetcher.js
const [data, setData] = useState(null);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch('https://gnikdroy.pythonanywhere.com/api/book')
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, []);
return(
<div>
{data.results.map((book, index) => (
<div key={index}>
<h1>{book.title}</h1>
<h2>
{
book.resources.find(
({ type }) => type === 'application/epub+zip'
).uri
}
</h2>
</div>
))}
</div>
)
ResourceFetcher.js
const router = useRouter();
const { name } = router.query;
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch(`https://gnikdroy.pythonanywhere.com/api/book/?search=${name}`)
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
console.log(data);
});
}, []);
return(
<div>
{data.results.map((book, index) => (
<div key={index}>
<h1>{book.title}</h1>
<h2>
{
book.resources.find(
({ type }) => type === 'application/epub+zip'
).uri
}
</h2>
</div>
))}
</div>
)
Console log output inside DataFetcher.js