TS - Cannot read prop

Unanswered

Great Skua posted this in #help-forum

Great SkuaOP

2023-06-13T14:08:52.000Z

Hello,
I'm trying to pass props to the child, but when I console log the tags, it provides an empty object
The textData is just an object, but tags is an array of objects.
This is the code

export const DetailsContainer = (
  textData: IServiceTextData,
  tags: IServiceTag[]
) => {
  console.log(tags);

  return (
    <>
      <div>the content...</div>
    </>
  );
};

This is textData, which works with no issues

export interface IServiceTextData {
  title: string;
  subtitle: string;
  originalPrice: number;
  priceColor: string;
  priceBold: boolean;
  priceDiscount: number;
  priceDiscountPercentage: string;
  isPrice: boolean;
}

And this is the tags:

export interface IServiceTag {
  id: number;
  title: string;
  backgroundColor: string;
  isBold: boolean;
}

This is from the parent:

<DetailsContainer {...service.textData} {...service.tags} />

Btw, when I console.log the service.tags in the parent, it shows them all
What is the problem here?

15 Replies

@Great Skua Hello, I'm trying to pass props to the child, but when I console log the tags, it provides an empty object The textData is just an object, but tags is an array of objects. This is the code js export const DetailsContainer = ( textData: IServiceTextData, tags: IServiceTag[] ) => { console.log(tags); return ( <> <div>the content...</div> </> ); }; This is textData, which works with no issues js export interface IServiceTextData { title: string; subtitle: string; originalPrice: number; priceColor: string; priceBold: boolean; priceDiscount: number; priceDiscountPercentage: string; isPrice: boolean; } And this is the tags: js export interface IServiceTag { id: number; title: string; backgroundColor: string; isBold: boolean; } This is from the parent: js <DetailsContainer {...service.textData} {...service.tags} /> Btw, when I console.log the service.tags in the parent, it shows them all What is the problem here?

joulev

2023-06-13T14:10:41.000Z

export const DetailsContainer = ({
  textData: IServiceTextData,
  tags: IServiceTag[]
}) => {
  console.log(tags);

  return (
    <>
      <div>the content...</div>
    </>
  );
};

<DetailsContainer textData={service.textData} tags={service.tags} />
// or
<DetailsContainer {...service} />

@joulev ts export const DetailsContainer = ({ textData: IServiceTextData, tags: IServiceTag[] }) => { console.log(tags); return ( <> <div>the content...</div> </> ); }; <DetailsContainer textData={service.textData} tags={service.tags} /> // or <DetailsContainer {...service} />

Great SkuaOP

2023-06-13T14:16:53.000Z

Yes I tried this but I get an error under textData
How do I fix that?

This is the interface of it

export interface IServiceTextData {
  title: string;
  subtitle: string;
  originalPrice: number;
  priceColor: string;
  priceBold: boolean;
  priceDiscount: number;
  priceDiscountPercentage: string;
  isPrice: boolean;
}

Great SkuaOP

2023-06-13T14:28:07.000Z

Btw, even like that, I still receive empty objects
@joulev

@Great Skua Yes I tried this but I get an error under textData How do I fix that?

joulev

2023-06-13T14:44:41.000Z

oh yeah i wrote it wrong, skill issue

wait a min

export const DetailsContainer = ({
  textData,
  tags
}: {
  textData: IServiceTextData,
  tags: IServiceTag[]
}) => {
  console.log(tags);

  return (
    <>
      <div>the content...</div>
    </>
  );
};