Nextjs API function not rendering all API results-CodePudding

Why is next not rendering all of the returns from the API, It's only rendering 1 out of the 3 possible from the API? The API is created in Strapi. I am new to using API's I have a feeling it's because of the arrays "[0]" in the API request but without this it renders nothing. I have tried replacing 0 with a 1 inside of the array but it simply changes that to the next request which is not at all what I want. I am not sure to why it's only rendering the 1 any help would be greatly 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]
    }
  ]
}

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 } }
  }

CodePudding user response：

Because you are rendering only one of the elements. You can render a list of elements by using Array.map(). So, in your case:

<Heading>{categories.name}</Heading>

{categories.papers.map((el, index) => {
  return(
  <div>
    <Text>Paper Uploaded at: {el.created_at}</Text>
    <Text>Paper name: {el.name}</Text>
    <Link href={`http://localhost:1337${el.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${el.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: {el.Media_Upload[0].ext}</Text>
  </div>
  )
})}
<Footer />

You can read more about Array.map() in here. P.S. You can render Media_Upload array the same way.