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 & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'` — SKL, Aug 04 '19 at 17:46

score 4 · Accepted Answer · edited Apr 05 '20 at 20:02

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 05 '20 at 20:02

vvvvv

25,404
19
49
81

answered Aug 04 '19 at 18:25

Puneet Bhandari

337
5
14

@SKL Its great that i am able to help – Puneet Bhandari Aug 04 '19 at 18:30

score 0 · Answer 2 · answered Aug 04 '19 at 17:51

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 04 '19 at 17:51

Hubi

104
11

yes i did. When console.log `this.props` in `render()` it is showing empty object. tsx checking type thats why throwing this error – SKL Aug 04 '19 at 18:05
The object is empty twice? during mounting, it could be empty. What happened after update (second render) – Hubi Aug 04 '19 at 18:11
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 & Readonly<{}> & Readonly<{ children?: ReactNode; }>'` This issue will be fixed if we fix type – SKL Aug 04 '19 at 18:22
https://stackoverflow.com/questions/48240449/type-is-not-assignable-to-type-intrinsicattributes-intrinsicclassattribu I have found this answer. It says: "You must give propTypes and stateType when you use typescript." – Hubi Aug 04 '19 at 18:30

How to pass data in reactjs using typescript

2 Answers2

Linked