I want to display a div layer if list if empty into React page. I tried this:
{(() => {
if (!ordersList && ordersList.length === 0) {
return (
<div className="alert alert-warning">No Orders found</div>
)
}
})()}
But it's not working. What is the proper way to implement this?
If I understand you correctly, you want to conditionally render a div when ordersList (a variable/state that I presume is in your component) is empty. Then add this to your JSX returned by your component.
{!ordersList.length && <div className="alert alert-warning">No Orders found</div>}
The condition is incorrect. If list is empty, then !ordersList will be false.
So, the <div> won't be rendered.
You may try this:
{(() => {
if (!ordersList || ordersList.length === 0) {
return (
<div className="alert alert-warning">No Orders found</div>
)
}
})()}
Or even simpler:
{
(!ordersList || ordersList.length === 0) &&
<div className="alert alert-warning">No Orders found</div>
}