Tengo un componente de tarjeta de lista que muestra los dispositivos en una lista con su nombre, marca, imagen, reservado hasta (durante cuánto tiempo está reservado si está reservado). Toda esta información proviene de un archivo Json. Tengo dos preguntas:

1. ¿Hay una mejor manera de hacer la parte if(!bookedUntil) { ... } ? Porque traté de hacerlo con operadores ternarios dentro de return() pero no pude hacer que mostrara ambos y el texto si está reservado o no. Entonces recurrí a mostrarlo con diferentes variables.
2. Sigo recibiendo un error de que la fecha es nula y no puedo mostrarla ni siquiera en la consola. Intenté una declaración if diferente, pero seguía recibiendo el mismo error. Lo principal que traté de lograr es que el ciclo obtuviera información sobre el artículo si no está reservado (verifica si bookedUntil es nulo, si es nulo, luego muestra AvailableItemIcon con el texto "Available".) y si está reservado (de lo contrario, si bookedUntil no es nulo, hay fechas con la duración de la reserva de cada dispositivo. Por lo tanto, si hay X fechas y X cantidad de dispositivos, mostraría el texto BookedItemIcon "reservado hasta" y una de las primeras fechas de X fechas, porque todas las los dispositivos están reservados).

Componente ListCard:

 const ReservationsListCard = ({ device: { id, name, brand, bookedUntil, quantity, image }, liked = false, }) => { let stateIcon; let stateText; var min = null; let dateArray = []; if (!bookedUntil) { stateIcon = <AvailableItemIcon />; stateText = "Available"; } else { stateIcon = <BookedItemIcon />; stateText = "Booked until"; dateArray = bookedUntil; for (var i = 0; i < dateArray.length; i++) { var current = dateArray[i]; if (min != null || current.date < min.date) { min = current; } } } return ( <a href={"/device/" + id} className="reservations-list-card"> <img className="reservations-list-card__image" alt="device" src={image} /> <div className="reservations-list-card__brand ">{brand}</div> <div className="reservations-list-card__name">{name}</div> <div className="reservations-list-card__availability"> {stateIcon} &nbsp;&nbsp; {stateText} {console.log(min.date)} </div> <div className="reservations-list-card__quantity"> QUANTITY: {quantity} </div> </a> ); }; ReservationsListCard.propTypes = { device: PropTypes.object, }; export default ReservationsListCard;