Lack of access to classes in Back Tick

Question

function Home() {
  let displayCards = Galeyre.map((item) => {
    return `
        <div class="card_container">
            <div class="card">
                <div class="face-side">
                    <alt="Question mark">
                </div>
                <div class="back-side">
                    <alt="${item.name} flag icon">
                </div>
            </div>
        </div>`;
  }).join("");

No matter what I did, I can't style the element classes in backtick in the css section, how can I fix this problem please?

Answer 1

I suggest, before you do anything you go and read the documentation on how to get started. In summary: React is a UI library based on state, and the components that you build (generally in JSX) are reactive to that state.

While you're generally heading in the right direction React doesn't use back-ticks to create HTML strings - all of that is dealt with as part of the library. You just need to learn the syntax, how state works, and how to organise your components so they respond to that state.

---

This documented example based on your code should help you out.

const { useState } = React;

// Your Home component - we're passing in the deck // of cards through its props
function Home({ deck }) {
  
  // We set up some state using that deck
  const [cards, setCards] = useState(deck);
  
  // A function that we pass down to our Card component
  // It takes the id from the clicked card's dataset
  // and then updates the cards state based on that id, to and from `visible`
  function handleClick(e) {
    const card = e.target.closest('.card');
    if (card) {
      const { dataset: { id } } = card;
      setCards(prev => {
        return prev.map(card => {
          if (card.id === Number(id)) {
            return { ...card, visible: !card.visible };
          }
          return card;
        });
      });
    }
  }
  
  // The Home component `maps` over the cards array
  // in state and returns a Card component for each card. It also passes down a reference to the `handleClick` function
  // that each card can use when it's clicked
  return (
    <main>
      {cards.map(card => {
        return (
          <Card
            key={card.id}
            card={card}
            handleClick={handleClick}
          />
        );
      })}
    </main>
  );
}

// The card component accepts the card data, and the
// `handleClick` function in its props
function Card({ card, handleClick }) {

  // We destructure the id, name, and visible boolean
  // from the card data
  const { id, symbol, visible } = card;
  
  // And we define the HTML of the card
  // with classes (note: className, not class) that
  // respond to the changes in state
  return (
    <div
      data-id={card.id}
      className="card"
      onClick={handleClick}
    >
      <div className={`face ${visible && 'hidden'}`}>
        ?
      </div>
      <div className={`face ${!visible && 'hidden'}`}>
        {card.symbol}
      </div>
    </div>
  );
}

// Our deck definition - note the inclusion of the
// `visible` property - which defines whether a card // is visible (back-facing) or not visible (front-facing) 
const deck = [
  { id: 1, symbol: '♠', visible: false },
  { id: 2, symbol: '♥', visible: false },
  { id: 3, symbol: '♦', visible: false },
  { id: 4, symbol: '♣', visible: false }
];

const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);

// We pass the deck into the Home component in
// its props
root.render(<Home deck={deck} />);

.card { width: 75px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid black; font-size: 2rem; }
.card:hover { cursor: pointer; background-color: lightyellow;}
.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>