I am using NextJS with typescript. In the main async page, I get the client Quotes
const clientQuotes: IQuote[] = await getAllQuotes();
.
The IQuote interface have the following form:
export interface IQuote {
id: string
dateTimeAdded: string
hasBeenPaid: boolean
completed: boolean
dateTimeNeeded: string
nameClient: string
numberOfVechicles: number
serviceRequired: string
phoneNumber: string
clientEmail: string
detailsOfQuote: string
};
The response I get is a normal array of objects. [{}, {}]
, filled with the info above.
Next, I created another component where I passed the array with a prop quotes
. However, this prop is highlighted in red. <UncompletedQuotes quotes={clientQuotes}/>
The error is Type '{ quotes: IQuote[]; }' is not assignable to type 'IntrinsicAttributes & IQuoteList'. Property 'quotes' does not exist on type 'IntrinsicAttributes & IQuoteList'.ts(2322)
, which I do not understand…
import React, { FC } from 'react'
export interface IQuote {
id: string
dateTimeAdded: string
hasBeenPaid: boolean
completed: boolean
dateTimeNeeded: string
nameClient: string
numberOfVechicles: number
serviceRequired: string
phoneNumber: string
clientEmail: string
detailsOfQuote: string
};
interface IQuoteList extends Array<IQuote>{};
const UncompletedQuotes: FC<IQuoteList> = (quotes) => {
console.log(quotes);
return (
<section>
</section>
)
}
export default UncompletedQuotes
The problem is also that if I log in console the prop sent I get an object that contains a key called quotes. So instead to have a simple array of objects I get something of the following form:
{quotes: [{id, dateTime, etc}, {id, dateTime, etc}]}
>Solution :
Try this:
export interface IQuote {
id: string
dateTimeAdded: string
hasBeenPaid: boolean
completed: boolean
dateTimeNeeded: string
nameClient: string
numberOfVechicles: number
serviceRequired: string
phoneNumber: string
clientEmail: string
detailsOfQuote: string
}
// here you assign all props your function/component will have
// this will be the type of your function object param
type ComponentType = {
quotes: IQuote[]
// you can add as many props you want
otherProp: number
anotherProp: string
}
// your function/component will receive an object as ComponentType
// and we are destructuring it in function declaration...
function UncompletedQuotes({
quotes,
otherProp,
anotherProp
}: ComponentType): JSX.Element {
console.log(quotes)
return (
<section>
</section>
)
}
// ... or you can create the function and destruct params object later
function UncompletedQuotes(params: ComponentType) {
const {
quotes,
otherProp,
.... etc
} = params
....
}
export default UncompletedQuotes
Hope this helps you 😀