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

CodePudding user response：

Use backticks like so:

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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`}.