can't import dynamic value inside curly braces - Zero to Mastery React-CodePudding

it's my first question on StackOverflow; quite basic

I'm studying the "Zero to Mastery" react course, and I can't understand why I can't use ${} or {} inside the image source, I mean the props.monster.id

import "./card.styles.css";

export const Card = (props) => (
  <div className="card-container">
    <img src={"https://robohash.org/${props.monster.id}?set=set2"} />
    <h1> {props.monster.name} </h1>
  </div>
);

and this is its brother (Sorry for my form of question)


import { Card } from "../card/card.component";

import "./card-list.styles.css";

export const CardList = (props) => {
  return (
    <div className="card-list">
      {props.monsters.map((monster) => (
        <Card key={monster.id} monster={monster} />
      ))}
    </div>
  );
};

CodePudding user response：

<img src={`https://robohash.org/${props.monster.id}?set=set2`} />

replace the "" with backticks like i did in the example

CodePudding user response：

You have to use backticks instead of quotes to concatenate string and variables:

export const Card = (props) => (
  <div className="card-container">
    <img src={`https://robohash.org/${props.monster.id}?set=set2`} />
    <h1>{props.monster.name}</h1>
  </div>
);