Why am I unable to pass this prop through to component 'is not assignable to type 'IntrinsicAttributes'

Question

I'm wanting to pass savedDocuments through to SavedDocument component. savedDocuments type:

type DocumentUploaderFile = {
    documentId: string;
    id: string;
    name: string;
    size: number;
    status: 'loaded' | 'failed' | 'removing';
}

The error I'm receiving is:

Type '{ document: DocumentUploaderFile; savedDocuments: DocumentUploaderFile[]; }' is not assignable to type 'IntrinsicAttributes & { document: DocumentUploaderFile; }'.
  Property 'savedDocuments' does not exist on type 'IntrinsicAttributes & { document: DocumentUploaderFile; }'.

This is my component I'm trying to pass my prop from:

const AdditionalDocumentationList = ({ savedDocuments }: { savedDocuments: DocumentUploaderFile[] }) => {
  const renderDocuments = (savedDocuments: DocumentUploaderFile[]) => {
    return savedDocuments.map((document: DocumentUploaderFile) => {
      return <SavedDocument document={document} savedDocuments={savedDocuments} />
    })
  }

  return <AdditionalDocumentationWrapper>{renderDocuments(savedDocuments)}</AdditionalDocumentationWrapper>
}

I'm wanting to pass this array through so I can update it when my DeleteIconSmall is clicked in my SavedDocument component, it will remove the matching id from savedDocuments array.

This is the child component I'm trying to pass the prop through to:

const SavedDocument = (
  { document }: { document: DocumentUploaderFile },
  { savedDocuments }: { savedDocuments: DocumentUploaderFile[] }
) => {
  return (
    <SavedDocumentWrapper>
      <StepCompleteIconSmall />
      <SavedDocumentName>{document.name}</SavedDocumentName>
      <DeleteIconSmall />
    </SavedDocumentWrapper>
  )
}

score 1 · Answer 1 · answered Nov 03 '22 at 03:40

you are passing the props in the wrong way on the SavedDocument Component should be like this

const SavedDocument = (
  { document, savedDocuments }: { document: DocumentUploaderFile, savedDocuments: DocumentUploaderFile[] }
) => {
  return (
    <SavedDocumentWrapper>
      <StepCompleteIconSmall />
      <SavedDocumentName>{document.name}</SavedDocumentName>
      <DeleteIconSmall />
    </SavedDocumentWrapper>
  )
}

Why am I unable to pass this prop through to component 'is not assignable to type 'IntrinsicAttributes'

1 Answers1