I am facing an issue with rendering all the returns from the API in my Next.js application. The API, which is created in Strapi, is only displaying 1 out of the 3 possible returns. I am a beginner when it comes to using APIs and I suspect that the issue lies with the arrays "[0]" in the API request. However, if I remove this, nothing gets rendered. I've tried changing the index from 0 to 1 within the array, but it just moves to the next request instead of showing all the available data. Any assistance on why only one entry is being rendered would be highly appreciated!
API USAGE
// pages/categories/[category].js
import Link from 'next/link'
import {Text,VStack, Button, Icon, Heading, Alert, AlertIcon, AlertTitle, AlertDescription, Center } from '@chakra-ui/react'
import {FcExternal} from 'react-icons/fc'
import Moment from 'react-moment';
function Category({ categories }) {
return (
<VStack minH="500px">
<Center>
<Alert status="info">
<AlertIcon />
<AlertTitle>Please note:</AlertTitle>
<AlertDescription>None of these papers are created or owned by the developer, they are created by the Department of Education Australia all rights go to them for these papers.</AlertDescription>
</Alert>
</Center>
<Heading>{categories.name}</Heading>
{categories.papers.map((cat) => {
<div>
<Text>Paper Uploaded at: {cat.created_at} </Text>
<Text>Paper name: {cat.name}</Text>
<Link href={`http://localhost:1337${cat.PDF_link}`}>
<a target="_blank" rel="noopener noreferrer">
<Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open PDF</Button>
</a>
</Link>
<Link href={`http://localhost:1337${cat.PDF_Answers_Link}`}>
<a target="_blank" rel="noopener noreferrer">
<Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open Paper Answers</Button>
</a>
</Link>
<Text>File Format: {cat.Media_Upload[0].ext}</Text>
</div>
})}
</VStack>
)
}
export async function getStaticPaths() {
const res = await fetch('http://localhost:1337/Categories')
const Categories = await res.json()
const paths = Categories.map((category) => ({
params: { category: category.id.toString() },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`http://localhost:1337/Categories/${params.category}`)
const categories = await res.json()
console.log(categories)
// Pass post data to the page via props
return { props: { categories } }
}
export default Category
API Return
{
id: 9,
name: 'Entertainment Industry',
Papers_Exist: true,
web_link: 'categories/9',
published_at: '2021-10-11T11:28:07.088Z',
created_at: '2021-10-11T11:14:33.863Z',
updated_at: '2021-10-11T11:28:08.221Z',
papers: [
{
id: 4,
name: 'Entertainment Industry Paper 2020',
PDF_link: '/uploads/2020_hsc_vet_entertainment_18c5c978de.pdf',
file_uploaded_at: '2021-10-11',
PDF_Answers_Link: '/uploads/2020_hsc_entertainment_mg_5299ae9c24.pdf',
published_at: '2021-10-11T11:28:14.016Z',
created_at: '2021-10-11T11:27:46.534Z',
updated_at: '2021-10-11T11:28:14.032Z',
Media_Upload: [Array]
},
{
id: 5,
name: 'English Studies Paper 2019',
PDF_link: '/uploads/2019_hsc_vet_entertainment_f2b48d77a0.pdf',
file_uploaded_at: '2021-10-11',
PDF_Answers_Link: '/uploads/2019_hsc_vet_entertainment_mg_fe47d01fdf.pdf',
published_at: '2021-10-11T11:30:18.975Z',
created_at: '2021-10-11T11:30:13.061Z',
updated_at: '2021-10-11T11:30:18.989Z',
Media_Upload: [Array]
},
{
id: 6,
name: 'English Studies Paper 2018',
PDF_link: '/uploads/2018_hsc_vet_entertainment_acd7616cae.pdf',
file_uploaded_at: null,
PDF_Answers_Link: '/uploads/2018_hsc_vet_entertainment_mg_4a5d3e2660.pdf',
published_at: '2021-10-11T11:31:42.294Z',
created_at: '2021-10-11T11:31:40.155Z',
updated_at: '2021-10-11T11:31:46.107Z',
Media_Upload: [Array]
}
]
}
https://i.stack.imgur.com/zCI80.png
getStaticProps $ getStaticPaths
export async function getStaticPaths() {
const res = await fetch('http://localhost:1337/Categories')
const Categories = await res.json()
const paths = Categories.map((category) => ({
params: { category: category.id.toString() },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`http://localhost:1337/Categories/${params.category}`)
const categories = await res.json()
console.log(categories)
// Pass post data to the page via props
return { props: { categories } }
}