Types for an object passed as props

I run a map where I loop out content from a CMS

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps; 
    }
  }
}

const AuditRenderer = ({ content }: PureContentProps ) => {
  const allContent = content.descendants?.items.map((allContent) => (
    <AuditConditionalRenderer allContent={allContent} />
  ));

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps; 
    }
  }
}

const AuditRenderer = ({ content }: PureContentProps ) => {
  const allContent = content.descendants?.items.map((allContent) => (
    <AuditConditionalRenderer allContent={allContent} />
  ));

Then I use this data in my component, it looks like this

type ContentProps = {
    level: number; 
    name: string; 
    beskrivelse: string; 
    vurdering: string; 
    funn: string; 
}
const AuditConditionalRenderer = ({ allContent }: {allContent: ContentProps}) => {

type ContentProps = {
    level: number; 
    name: string; 
    beskrivelse: string; 
    vurdering: string; 
    funn: string; 
}
const AuditConditionalRenderer = ({ allContent }: {allContent: ContentProps}) => {

So I use the data in "items" I get from my CMS. Items are descirbed by ContentProps. How can I tell TS this? Currently getting an error on "allContent" in my map stating "Type 'string' is not assignable to type 'ContentProps'" Do I have to manually pass each value instead of sending everything as an object? Seems a bit cumbersom

1 Reply

VimesOP•2y ago

I solved this, solution was to make ContentProps an array (object? )

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps[]; 
    }
  }
}

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps[]; 
    }
  }
}

Gaming

Programming

Types for an object passed as props