Pass an array into custom component in NextJs

Question

I'm having some trouble passing data into a custom component in my NextJS app in TypeScript. I have a custom component (not in pages folder) defined as:

import { Trip } from '../components/models'

export const TripsComponent = (data: Trip[]) => {
    return (
        <div>
            <h1>Your Trips</h1>
            <div>
                {data.map((trip: Trip) => (
                    <div className="card">
                        <h3>{trip.name}</h3>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

Trip is a custom type defined as:

type Trip = {
    id: string;
    user_id: string;
    name: string;
}

And I have a page in /pages defined as:

import axios from 'axios'
import { GetStaticProps, InferGetStaticPropsType, NextPage } from 'next'
import { Trip } from '../components/models'
import TripsComponent from '../components/trips-component'

const TripsPage: NextPage = (data: InferGetStaticPropsType<typeof getStaticProps>) => {
    console.log(data)
    return (
        <div className="container">
            <TripsComponent data={data} />
        </div>
    )
}

type GetTripsResponse = {
    data: Trip[]
}

const apiURL = 'http://localhost:3001/trips/'

export const getStaticProps: GetStaticProps = async (context) => {
    try {
        const { data, status } = await axios.get<GetTripsResponse>(apiURL, {
            headers: {
                Accept: 'application/json',
            },
        })
        //console.log(JSON.stringify(data, null, 4))
        return {
            props: {
                data,
            },
        }
    } catch (e) {
        return {
            notFound: true,
        }
    }
}

export default TripsPage

The console.log(data) has data and it's shape is:

{
  data: [
    {
      id: '0b68a50a-8377-4720-94b4-fabdabc12da1',
      user_id: 'Test1',
      name: 'Test1'
    },
    {
      id: '358ea2eb-d487-4932-b7ad-0ce155f41bbf',
      user_id: 'Test2',
      name: 'Test2'
    },
    {
      id: '4a7a0ecd-fb80-4138-96e6-3bac9551ab02',
      user_id: 'Test2',
      name: 'Test2'
    },
    {
      id: '6726f3ab-6036-4a75-9499-0bf0e8fb1fcf',
      user_id: 'Test3',
      name: 'Test3'
    },
  ]
}

How can I pass this data into TripsComponent so it can render the view?

oliverwebr · Accepted Answer · 2022-08-28 19:31:20Z

4

A React component gets its JSX Attributes as the first parameter in form of an Object "called" props:

<Hello data={["hi"]}></Hello>
const Hello = ({data})=> (...)

Your TripsComponent should be changed accordingly:


import { Trip } from '../components/models'

export const TripsComponent = ({data}: {data:Trip[]}) => {
    return (
        <div>
            <h1>Your Trips</h1>
            <div>
                {data.map((trip: Trip) => (
                    <div className="card">
                        <h3>{trip.name}</h3>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

In your getStaticProps function you need to return an Object Props which will become the Props Object of your page. You return prop.data but you named props data in getStaticProps this is where the confusion is coming from:

// getStaticProps...
       return {
            props: {
                data,
            },
        }

const TripsPage: NextPage = ({data}: InferGetStaticPropsType<typeof getStaticProps>) => {
    console.log(data)
    return (
        <div className="container">
            <TripsComponent data={data} />
        </div>
    )
}

edited Aug 28, 2022 at 19:31

answered Aug 28, 2022 at 19:04

oliverwebr

6234 silver badges16 bronze badges

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

5 Comments

FlameDra Over a year ago

Thanks for taking a look! I made the change to the TripsComponent as you suggest, but how do I pass it in my page? <TripsComponent data={data} /> does not seem to work.

oliverwebr Over a year ago

@FlameDra did you console.log your data in TripsComponent?

oliverwebr Over a year ago

Ah i see you have the same problem with your nextjs Page. getStaticProps returns {data} your Page gets it as data -> {data}

FlameDra Over a year ago

Ah doing <TripsComponent data={data.data} /> seems to resolve it. Is this the proper way to do it in NextJS or is there some convention which i don't know of?

oliverwebr Over a year ago

Yes that or destructuring data like in my example (TripsPage = ({data})) That's how you do it. Just name your data, not data, maybe trips. Then you don't confuse it. :)

Collectives™ on Stack Overflow

Pass an array into custom component in NextJs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related