Display no results when table empty in React - arrays

Question

I have a table of rows that display contact information. I'd like to have it render a messasge of "No contacts" when the listItems array is 0. I tried creating a const noEntries variable and setting it with the array to 0, and using {noEntries No entries}, but this is throwing an error.
class ContactList extends Component {
constructor(props) {
super(props);
this.createContact = this.createContact.bind(this);
}
delete(key) {
this.props.delete(key);
}
createContact(item) {
return <tr key={item.key}>
<td>{item.firstname}</td>
<td>{item.lastname}</td>
<td>{item.phone}</td>
<td><i className="fas fa-trash-alt" onClick={() => { if (window.confirm('Are you sure you want to delete ' + item.firstname + ' ' + item.lastname + ' from your contacts?')) this.delete(item.key)}}></i></td>
</tr>
}
render() {
const contactEntries = this.props.entries;
const listItems = contactEntries.map(this.createContact);
return (
<table className="mui-table mui-table--bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{listItems}
</tbody>
</table>
);
}
};
export default ContactList;

Answer 1

in your render() do like this:
render() {
const contactEntries = this.props.entries;
const listItems = contactEntries.map(this.createContact);
return (
contactEntries.length > 0?
<table className="mui-table mui-table--bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{listItems}
</tbody>
</table>:<span>No results</span>
);
}

Answer 2

check the number of records in contactEntries using ternary operator if length ==0 then return no data component else return rows
const listItems = contactEntries && contactEntries.length >0
? contactEntries.map(this.createContact)
: <tr key={item.key}>
<td rowspan="3">No data</td
</tr>