Display label if list is empty-CodePudding

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?

CodePudding user response：

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>
}

CodePudding user response：

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>}