How to pass data in reactjs using typescript

Question

How to pass object to child component in reactjs using tsx. I'm geting this error when I tried this way. Where I can declare the type? Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard>

Cards.tsx

  render() {
    return (
      <div>
        {this.state.card.map((card: any) => (
          <ShipmentCard key={card.id} value={card}/>
        ))}
      </div>
    );
  }

The full error message is:

Type '{ key: any; data: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'

full error message Type '{ key: any; data: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<{}> & Readonly<{ children?: ReactNode; }>' — SKL
– SKL, Commented Aug 4, 2019 at 17:46

vvvvv · Accepted Answer · 2020-04-05 20:02:57Z

4

If you are using typescript then you have to declare all props in ShipmentCard.tsx

interface ShipmentCardProps {
    key: string;
    value: {}
}

interface ShipmentCardState {}

class ShipmentCard extends React.Component<ShipmentCardProps, ShipmentCardState> {
}
export default ShipmentCard

edited Apr 5, 2020 at 20:02

vvvvv

32.9k19 gold badges70 silver badges103 bronze badges

answered Aug 4, 2019 at 18:25

Puneet Bhandari

3562 gold badges5 silver badges16 bronze badges

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

1 Comment

Puneet Bhandari Over a year ago

@SKL Its great that i am able to help

Hubi · Accepted Answer · 2019-08-04 17:51:32Z

0

Try this. have you 'card' in your state? It seems like no. You need to get props from parent component. You need to try pass data using props. So read the link. And try to use redux.

answered Aug 4, 2019 at 17:51

Hubi

1041 silver badge12 bronze badges

4 Comments

SKL Over a year ago

yes i did. When console.log this.props in render() it is showing empty object. tsx checking type thats why throwing this error

Hubi Over a year ago

The object is empty twice? during mounting, it could be empty. What happened after update (second render)

SKL Over a year ago

If u pass an obejct in value attribute its throwing an error but value still showing console log. Error

Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'

This issue will be fixed if we fix type

Hubi Over a year ago

stackoverflow.com/questions/48240449/… I have found this answer. It says: "You must give propTypes and stateType when you use typescript."

Collectives™ on Stack Overflow

How to pass data in reactjs using typescript

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related