Remove uploaded documents from list-CodePudding

I currently have a document uploader and when a document is uploaded and save is clicked it will render a saved documents summary panel. Basically what I'm wanting to do is onclick of the DeleteIconSmall I want to remove the document name from the summary.

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

CodePudding user response：

If you're looking for a general approach, I'd provide an onDelete prop to SavedDocument handle removal in the parent. If you just want to clear document.name based on whether that icon's been clicked - all inside this component - you'll want to add a click handler to the icon and store state that tracks whether the icon's been clicked, then choose not to render the name if that state variable is true.

Assuming there is an onClick prop on your delete icon (if there's not you may need to wrap the icon with something that does handle clicks), something like this might work:

const SavedDocument = ({ document }: { document: DocumentUploaderFile }) => {
  const [hasDeletedDocument, setHasDeletedDocument] = useState(false);
  return (
    <SavedDocumentWrapper>
      <StepCompleteIconSmall />
      <SavedDocumentName>{hasDeletedDocument ? '' : document.name}</SavedDocumentName>
      <DeleteIconSmall onClick={() => setHasDeletedDocument(false)} disabled={hasDeletedDocument} />
    </SavedDocumentWrapper>
  )
}