0

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

Rendered Page

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 } }
  }
1
  • since categories is an array you have to use .map Commented Oct 11, 2021 at 12:45

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

6 Comments

Using this nothing is rendering at all now? the page is blank except for the nav, footer and alert
Placed it over the code I already had, I just tried to rewrite it the same way still no luck
I've added the full code to the post
The first code snippet it the entire file
okay so adding the second return statement has managed to work, although it didn't work the first time possibly a spelling mistake. Thanks for your help champ will mark you reply as the answer!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.