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'.

Avin Kavish · Accepted Answer · 2019-06-10 18:26:15Z

7

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.

edited Jun 10, 2019 at 18:26

answered Jun 10, 2019 at 18:20

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

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

1 Comment

Jur Over a year ago

Never knew this syntax. Thank you so much!

Collectives™ on Stack Overflow

React + Typescript object props to component error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related