Quiero mostrar una capa div si la lista está vacía en la página Reaccionar. Intenté esto:
{(() => { if (!ordersList && ordersList.length === 0) { return ( <div className="alert alert-warning">No Orders found</div> ) } })()}Pero no está funcionando. ¿Cuál es la forma correcta de implementar esto?
Si lo entiendo correctamente, desea representar condicionalmente un div cuando ordersList (una variable/estado que supongo que está en su componente) está vacío. Luego agregue esto a su JSX devuelto por su componente.
{!ordersList.length && <div className="alert alert-warning">No Orders found</div>}La condición es incorrecta. Si la lista está vacía, entonces !ordersList será falso. Por lo tanto, el <div> no se representará.
Puedes intentar esto:
{(() => { if (!ordersList || ordersList.length === 0) { return ( <div className="alert alert-warning">No Orders found</div> ) } })()}O incluso más simple:
{ (!ordersList || ordersList.length === 0) && <div className="alert alert-warning">No Orders found</div> }