CODEWITHSUNDEEP
javascripthtmlreactjsbracketsdollar-sign
Michał Warakomski
Michał Warakomski

Reputation: 15

Why dollar sign and brackets inside string do not work? Javascript/npm/react

I am taking HTML/CSS/JS course. There is exercise to create web app with robofriends. There should be many robofriends photos, but I got return only the same. Could you please check if I am doing something wrong? Brackets inside string do not work: <img alt='robots' src={"https://robohash.org/${id}?200x200"} />

As is MyFriends

As should be RoboFriends

Code

    import React from 'react';



const Card = (props) => {
    const { email, name, id } = props;

    return (
        

        <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
            <img alt='robots' src={"https://robohash.org/${id}?200x200"} />
            <div>
            <h2> {name} </h2>  
            <p>{email}</p>  
            </div>
        </div>
    );
}

export default Card;


    enter code here

Upvotes: 1

Views: 1479

Answers (3)

ethry
ethry

Reputation: 804

Double quotes don't support ${}.

Use:

<img alt='robots' src={`https://robohash.org/${id}?200x200`} />

Or

<img alt='robots' src={"https://robohash.org/" + id + "?200x200"} />

Upvotes: 0

Blueprint
Blueprint

Reputation: 442

Template literals are used with backticks, in your example you should replace the src in the img tag with the following: src={`https://robohash.org/${id}?200x200`}.

Upvotes: 1

cts
cts

Reputation: 1084

Use backticks like so:

  <img alt='robots' src={`https://robohash.org/${id}?200x200`} />

Upvotes: 4

Related Questions