Убрать отображение null в кружке рейтинга

Всем привет, друзья! Возник следующий вопрос. В общем я делала учебный проект, в котором у фильмов есть определенный рейтинг. Видимо не для всех фильмов есть цифра рейтинга в базе данных и по началу мне выдавалось undefined в кружке. Потом мне объяснили как сделать так, чтоб undefined перестало отображаться. С этим было все понятно, однако теперь вместо undefined отображается null- и вот с этим уже борюсь пару дней. Вот этим кодом было убрано undefined

${
              movie.rating &&
              `
            <div class="movie__average movie__average--${getClassByRate(
              movie.rating
            )}">${movie.rating}</div>
            `
            }

А вот на всякий полный код проекта.

const API_KEY = "6b883a19-3b94-4b17-97f6-02f06c154636";
const API_URL_POPULAR =
  "https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
  "https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";
const API_URL_MOVIE_DETAILS =
  "https://kinopoiskapiunofficial.tech/api/v2.2/films/";

getMovies(API_URL_POPULAR);

async function getMovies(url) {
  const resp = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": API_KEY,
    },
  });
  const respData = await resp.json();
  showMovies(respData);
}

function getClassByRate(vote) {
  if (vote >= 7) {
    return "green";
  } else if (vote > 5) {
    return "orange";
  } else {
    return "red";
  }
}

function showMovies(data) {
  const moviesEl = document.querySelector(".movies");

  //Clearing previous movies
  document.querySelector(".movies").innerHTML = "";
  data.films.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<div class="movie__cover-inner">
            <img
              src="${movie.posterUrlPreview}"
              class="movie__cover"
              alt="${movie.nameRu}"
            />
            <div class="movie__cover--darkened"></div>
          </div>
          <div class="movie__info">
            <div class="movie__title">${movie.nameRu}</div>
            <div class="movie__category">${movie.genres.map(
              (genre) => `${genre.genre}`
            )}</div>
            
            ${
              movie.rating &&
              `
            <div class="movie__average movie__average--${getClassByRate(
              movie.rating
            )}">${movie.rating}</div>
            `
            }
          </div>
`;
    movieEl.addEventListener("click", () => openModal(movie.filmId));
    moviesEl.appendChild(movieEl);
  });
}

const form = document.querySelector("form");
const search = document.querySelector(".header__search");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
  if (search.value) {
    getMovies(apiSearchUrl);

    search.value = "";
  }
});

// Modal
const modalEl = document.querySelector(".modal");

async function openModal(id) {
  const resp = await fetch(API_URL_MOVIE_DETAILS + id, {
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": API_KEY,
    },
  });
  const respData = await resp.json();
  modalEl.classList.add("modal--show");
  document.body.classList.add("stop-scrolling");

  modalEl.innerHTML = `
    <div class="modal__card">
      <img class="modal__movie-backdrop" src="${respData.posterUrl}" alt="" />
      <h2>
        <span class="modal__movie-title">${respData.nameRu}</span>
        <span class="modal__movie-release-year"> - ${respData.year}</span>
      </h2>
      <ul class="modal__movie-info">
        <div class="loader"></div>
        <li class="modal__movie-genre">Genre - ${respData.genres.map(
          (el) => `<span>${el.genre}</span>`
        )}</li>
        ${
          respData.filmLength
            ? `<li class="modal__movie-runtime">Runtime - ${respData.filmLength} mins</li>`
            : ""
        }
        <li>
          Site: <a class="modal__movie-site" href="${respData.webUrl}">${
    respData.webUrl
  }</a>
        </li>
        <li class="modal__movie-overview">Description - ${
          respData.description
        }</li>
      </ul>
      <button type="button" class="modal__button-close">
        Close
      </button>
    </div>
  `;
  const btnClose = document.querySelector(".modal__button-close");
  btnClose.addEventListener("click", () => closeModal());
}

function closeModal() {
  modalEl.classList.remove("modal--show");
  document.body.classList.remove("stop-scrolling");
}

window.addEventListener("click", (e) => {
  if (e.target === modalEl) {
    closeModal();
  }
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 27) {
    closeModal();
  }
});

Вопрос- как же все-таки избавиться от этого назойливого null?