I am new to SPFx and React. The requirement is to read a Sharepoint Custom List and render the list columns with custom look and feel. This is achieved and read all the attachments (more than one, for a single list item).
How to open all the attachments with React FileViewer (more than one) in browser?
public render(): React.ReactElement<ICirDetailsProps> {
this._renderListAsync();
return(
<div className="${ styles.cirDetails }">
<div className="${ styles.container }">Circulars<br/>
<div id="cirDetails" className="${ styles.details}"></div>
</div>
</div>
);
}
attachments.forEach((afile: any) => {
let fileUrl = hostURL + afile.ServerRelativeUrl;
let fileExt = this.getFileExtension(afile.ServerRelativeUrl);
attFiles += `<FileViewer fileType='${fileExt}' filePath='${afile.ServerRelativeUrl}' /><br/>`;
});
const listContainer: Element = document.querySelector("#cirDetails") as HTMLElement;
listContainer.innerHTML=html;
It shows no error, but the attachments are not opened within browser. I could see the React FileViewer tags are rendered as HTML Content using F12. What is the mistake am I doing here?