I have a list card component which displays devices in a list with their name, brand, image, bookedUntil(for how long is it booked if it's booked). All of this information is coming from a Json file. I have two questions:

1. Is there a better way of doing the if(!bookedUntil) { ... } part ? Because I tried doing it with ternary operators inside the return( ) but I couldn't get it to display both of the and the text if it's booked or not. So I resorted to displaying it with different variables.
2. I keep getting an error that the date is null and I can't display it even in the console. Tried a different if statement but I still kept getting the same error. The main thing I tried to accomplish is that the cycle would get information about the item is it not booked (checks if bookedUntil is null, if it's null, then displays AvailableItemIcon with text "Available".) and if it's booked (else if bookedUntil is not null there are dates with how long each device is booked for. So if there are X dates and X amount of devices it would display BookedItemIcon text "booked until" and one of the earliest dates out of X dates, because all of the devices are boooked).

ListCard component:

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;