1 reply

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

TTC

Theo's Typesafe Cult•4y ago•

1 reply

Vimes

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}) => {

Types for an object passed as props

Similar Threads

Types for an object passed as props

Similar Threads

Similar Threads

Similar Threads