React + Typescript object props to component error

Question

Simple case; I'm rendering a list of 'Reviews'. These are provided using the following Proptype:

export interface Props {
    title: string;
    name: string;
    reviewdesc: string;
    rating: number;
}

Mapping through the results in the parent component:

{reviews.map((review: Props) => {
    return <Review data={review} />;
})}

And using the same Proptypes in the child component:

const Review = (data: Props) => { ...

It is giving me this error:

Type '{ data: Props; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'data' does not exist on type 'IntrinsicAttributes & Props'.

It feels like I'm forgetting a little thing. I thought I should catch the Props like {data} in the child component, but it gives:

Property 'data' does not exist on type 'Props'.

Answer 1

You are passing props incorrectly. Use,

<Review { ...review } />

... is called the spread operator and it "spreads" the properties of your object into props for that element.