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>
);
};
<img src={`https://robohash.org/${props.monster.id}?set=set2`} />
replace the "" with backticks like i did in the example
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>
);