The FolderBlock component is rendered after we write the file hashes, the MTH, and the FTH to the blockchain. It lists the files in the directory that are written to the blockchain and the directory path for each file:

 {
 props.files.map((file,index) => {
 
 var splitString = file.split("/"); 
 var reverseArray = splitString.reverse();
 
 return (
 <div className="panel-block is-multiline">
 <div className="column">
 
 <div key={index} className="columns token">
 <div className="column">
 <strong>FileName </strong> 
 : {reverseArray[0]} 
 </div>
 <div className="column">
 <strong> Path</strong> 
 : {file}
 </div>
 </div>
 </div>
 </div> 
 )
 })
 }
 

Since the file array contains just the directory location of each file, we iterate through each member and split it from the end, delimited by "/" to get the file name. The file location and file name are then rendered on the screen.

The FolderBlock component is rendered only for about the first 5 seconds after the app writes all the hashes to the blockchain. When the app runs the first interval to compare and look for mismatches between the current hash signatures of the directory and the hash signatures written to the blockchain, the FolderBlock component is replaced by the FolderBlockChkStatus component.

The FolderBlockChkStatus component also shows the current status of the file (Tampered/Not Tampered) based on the result of the comparison returned by the backend server. Let's look at the FolverBlockChkStatus component next.