Pass an array into custom component in NextJs-CodePudding

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?

CodePudding user response：

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