CODEWITHSUNDEEP
reactjscomponentspass-datatsx
SKL
SKL

Reputation: 1453

How to pass data in reactjs using typescript

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; }>'

Upvotes: 4

Views: 8596

Answers (2)

Puneet Bhandari
Puneet Bhandari

Reputation: 356

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

Upvotes: 4

Hubi
Hubi

Reputation: 104

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.

Upvotes: 0

Related Questions