CODEWITHSUNDEEP
typescriptnext.js
angry kiwi
angry kiwi

Reputation: 11435

Nextjs How to declare prop type at the passing?

This is my page

import {
    InferGetServerSidePropsType,
    GetServerSideProps
} from 'next'
import ProductList from '../../component/product/ProductList'
export interface Item {
    title: string
    price: number
}
const products = ({
    data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    return (
        <div>
            <ProductList data={data} />
        </div>
    )
}
export const getServerSideProps:GetServerSideProps = async (context: any) => {
    let res = await fetch('/getAllProduct', {
        method: 'get',
    })
    const response: Array<Item> = await res.json()

    return {
        props: {
            data: response,
        },
    }
}
export default products

and this is my ProductList component

import { Item } from '../../pages/products/index'
const ProductList = ({ data }: Array<Item>) => {
    const renderData = () => {
        return data.map((i,index) => {
            return <div key={index}>{i}</div>
        })
    }
    return <div></div>
}
export default ProductList

In my ProductList component I got error: property data does not exist on Type Item.

What am I missing ?

enter image description here

Upvotes: 0

Views: 588

Answers (1)

tromgy
tromgy

Reputation: 5803

The problem is that you're trying to destructure an array as an object.

You need to change it to:

const ProductList = ([ ...data ]: Array<Item>) => {

Then data will be of type Item[]

Upvotes: 1

Related Questions