'React js issue while returning component through map

I am getting Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings in below function.Please help me on this.

 viewMultipleFile(){
    
            var totalFiles=this.props.crewQualification.files[this.props.crewQualification.completeData[0].id].length;
           
           if(typeof this.props.crewQualification.files!='undefined') {
       
           let files= this.props.crewQualification.files[this.props.crewQualification.completeData[0].id].map((item,index)=>{
              
           //this.viewDocument(localStorage.getItem("USER_FILE_UPLOAD_PATH") + this.props.crew.login_id + '/' + item.file)  
           let file=localStorage.getItem("USER_FILE_UPLOAD_PATH") + this.props.crew.login_id + '/' + item.file;
           if (typeof file != 'undefined' && file != null) {
            if(file?.charAt(0)=="/"){
                file=file.substring(1);
            }
        }
        const filename = file;
        if (typeof file != 'undefined' && file != null) {
            var fileFullname = filename.split("/");
            fileFullname = fileFullname[fileFullname.length-1];
            var fileType = fileFullname.substr((fileFullname.lastIndexOf('.') + 1));
            //this.setState({fileType:fileType,downloadSrc:filename});
              if(process.env.MIX_ENVCHECK == "server"){
                let formData = {
                    file: filename
                }
                let Url = 'common/image-path';
                var srcPath="";
                return apiCall.post(Url,formData).then(response => {
                    srcPath =response.data;
                });
            }else{
                srcPath = localStorage.getItem('API_URL')+filename;
                
            }
        } 
           return (
            <>
            <p class="text-right" style={{margin:'5px'}}>
               File {index+1} of {totalFiles} &nbsp;
                <a href="#" class="btn"  onClick={(e) => this.downloadReport(e,filename)}><i className={"fa fa-download"} style={{margin:'0'}}></i> Download</a>
            </p>
             { (fileType!='doc' && fileType!='DOC' && fileType!='msword' && fileType!='MSWORD') &&
                <>
                    <FileViewer
                        fileType={fileType.toLowerCase()}
                        filePath={srcPath}
                    />
                   
                </>
               
            } 
          
           
            { (fileType=="DOC" || fileType=='doc' || fileType=="msword" || fileType=='MSWORD') && 
                <iframe src={'https://docs.google.com/gview?url=' + encodeURIComponent(srcPath)+"&embedded=true&crossorigin=anonymous"}></iframe> 
            }
            {
                (index+1 < totalFiles) &&
                <hr/>
            }
       </> )
            });
           return files
        }
         }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source