How to check map has values or not react - reactjs

Question

I have a list users, those details want to show in table format. Want to check if map has value, if not show the message 'no data found'.
how can I achieve that.?
{filteredList && filteredList
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(row =>
( row===null ? (
<TableRow key={row.id}>
<TableCell className={classes.tableCell}>{items++}</TableCell>
<TableCell className={classes.tableCell}>
{row.sp_Name}
</TableCell>
<TableCell className={classes.tableCell}>{row.sp_Phone}</TableCell>
<TableCell className={classes.tableCell}>{row.sp_Role}</TableCell>
<TableCell className={classes.tableCell}>{row.sp_Service}</TableCell>
<TableCell className={classes.tableCell}>{row.sp_Location}</TableCell>
<TableCell className={classes.tableCell}>
<Link to={'/admin/profile/' + row.id} key={row.id} style={{ textDecoration: "none" }} >
<Chip
icon={<FaceIcon />}
label="View Profile/Action"
color="primary"
className={classes.chip}
variant="outlined"
onClcik={this.handleAction}
/>
</Link>
</TableCell>
<TableCell className={classes.tableCell}>
<Tooltip title="Delete">
<DeleteIcon color="danger" onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
{/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
</Tooltip>
</TableCell>
</TableRow>
) : "no data"
)
)}

Answer 1

Your can check if data exist first, if yes, render the table and row. If no data,
then you just render the required 'no data found' text
getData = () => {
const filteredList = this.state.list // your logic to get data
// Perform your logic to filter the data
return filteredList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
}
render() {
const filteredList = this.getData()
return (
filteredList.length > 0 ?
<table>
{data.map( /* Make your <tr> */ )}
</table> :
"no data found"
)
}