Trying to figure out how to change background image depending on the genre of that particular book REACT

Question

*I am currently trying to figure out how to change the background image of my book--container--fiction. I have three different images and depending on the genre of the book I would like to change these images but I am unsure on how to do that. Any help would be great :) I presume it would be similar to doing an if statement. Im just not sure how to go about it

  if(book.genre === "fiction") {
           return <div className="book--container--fiction"></div>
   } else if (book.genre === "non-fiction"){
           return <div className="book--container--non-fiction"></div>
    } else{
           return <div className="book--container--children"></div>
      }

*

import React from "react";
import "../stylesheets/Book.scss";
import { FiHeart } from "react-icons/fi";
import { Link } from "react-router-dom";
import isBookInWishlist from "../helper/isBookInWishList";

function Book({ book, handleSelectBook, handleSelectWishList, wishlist }) {
  return (
    <React.Fragment>
      <div className="book--container--fiction">
        <div className="book--wrapper">
          <div className="book--image">
            <img
              src={book.url}
              alt={book.title}
              className="book--image-style"
            />
          </div>
          <div className="book--content--wrapper">
            <div className="book--text--information">
              <h3>
                {book.title}
                <button
                  onClick={() => handleSelectWishList(book)}
                  className={
                    isBookInWishlist(book, wishlist)
                      ? "wishlist--icon orange"
                      : "wishlist--icon"
                  }
                >
                  <FiHeart />
                </button>
              </h3>

              <p>{book.author}</p>
              <p>{book.genre}</p>
              {/* <p>{book.desc}</p> */}
              <p className="book--price--style"> &euro; {book.price}</p>
            </div>
            <Link
              to="/productdetails"
              className="view--book--button"
              onClick={() => handleSelectBook(book)}
            >
              View Book
            </Link>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Book;

Answer 1

You can make use of template literals in JS like so:-

import React from "react";
import "../stylesheets/Book.scss";
import { FiHeart } from "react-icons/fi";
import { Link } from "react-router-dom";
import isBookInWishlist from "../helper/isBookInWishList";

function Book({ book, handleSelectBook, handleSelectWishList, wishlist }) {
  return (
    <React.Fragment>
      <div className={`book--container--${book.genre}`}>
        <div className="book--wrapper">
          <div className="book--image">
            <img
              src={book.url}
              alt={book.title}
              className="book--image-style"
            />
          </div>
          <div className="book--content--wrapper">
            <div className="book--text--information">
              <h3>
                {book.title}
                <button
                  onClick={() => handleSelectWishList(book)}
                  className={
                    isBookInWishlist(book, wishlist)
                      ? "wishlist--icon orange"
                      : "wishlist--icon"
                  }
                >
                  <FiHeart />
                </button>
              </h3>

              <p>{book.author}</p>
              <p>{book.genre}</p>
              {/* <p>{book.desc}</p> */}
              <p className="book--price--style"> &euro; {book.price}</p>
            </div>
            <Link
              to="/productdetails"
              className="view--book--button"
              onClick={() => handleSelectBook(book)}
            >
              View Book
            </Link>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Book;