Build your first react course stuck

Hi,
Following the react course and got stuck on attributes… The video shown a fix on the last video but i couldnt fix mine…

Here is my code for app.js

//import react first to run the code
import React from 'react';
import Card from './components/card';
//import css from src App
import './App.css';
//create class name App, render
class App extends React.Component{
  render(){
    return(
      //Add content or codes here
      <div className="container">
        <div className="row">
              <Card name="Dark Knight" role="Melee" avatarId={65} />
              <Card name="Dark Wizard" role="Range" avatarId={66} />
              <Card name="Elf" role="Healer" avatarId={64} />
        </div>
      </div>   
    );
  }
}
//export app to run
export default App;

and here is the card.js

//create components
import React from 'react';
const card = (props) => {

    const avatar = 'https://i.pravatar.cc/150?img=${props.avatarId}';
   return(

        <div className="col-md-4">
            <div className="card">
              <img className="card-img-top" src={avatar} alt="Card image cap" />
                <div className="card-body">
                    <h5 className="card-title">{props.name}</h5>
                    <h6 className="card-title">{props.role}</h6>
                        <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" className="btn btn-primary">Go somewhere</a>
                </div>
             </div>
        </div>
        );
}

export default card;

The issue is the image not getting right image when the page loaded.
Please advice

Which React course is that? Can you please supply a link or some other way for us to find that course?

My bad… Here is the link from the course

Thanks. I think that I’ll follow through with the rest of the React course to help gain some context about the problem.

Problem with install bootstrap

In the Install Bootstrap part of the course, the tutor states that he already has bootstrap installed. I don’t though, and my bootstrap complains about needing to have typescript installed.

Is that going to be a problem? I don’t know. Does the course mention anything about this at all? Not so far.

Images

When the course instructs you on adding an image, it completely fails to mention anything about alt or title tags. I have included them in my example code:

<img src="https://i.pravatar.cc/150?img=39" className="card-img-top"
     alt="Avatar" title="My avatar image" />

CSS issues

I don’t think that it’s appropriate these days to use pixel measurements, 100px in this case, for the page padding, is it?

Image links?

The React compiler complains about the sample Bootstrap Cards having bad href values, but the course seems to completely ignore the issue. Is that a problem to be worried about? Maybe it will be dealt with later on in the course.

Bad image id’s

At the end of Step 7 of the course, the example that the tutor gives shows unexpected images. That is because he made a mistake in the card.js file. He used ${props.name} but he needed to use ${props.avatarId} instead.

When the avatar website is given unexpected input of a persons name instead of an avatar id, it just tried to make sense of it as best as it can and gives nonsense back in return.

He provides a fix for this in the following video, but really should have re-recorded the incorrect video to fix that, or at least added an on-screen update telling you about the problem, and how to fix it at the time.

I’ve also updated my own use of the title attribute too.

const avatarTitle = `${props.name} avatar`;
<img className="card-img-top" src={avatar} alt="Avatar" title={avatarTitle} />

Fixing the problem you came here about

The const avatar line that you have is currently using single quotes. You need to use backticks instead, so that the ${props.avaterId} ends up being replaced with a suitable number.

Here’s what you currently have:

    const avatar = 'https://i.pravatar.cc/150?img=${props.avatarId}';

And here’s what you need, where the only change is changing the single quotes to be backticks, which are most commonly found just below the Esc key on your keyboard.

    const avatar = `https://i.pravatar.cc/150?img=${props.avatarId}`;
1 Like

Thanks… Now it’s showing the images but not the right one, lol.
This the image i took from pravatar, 70,69,68 https://pravatar.cc/images

and the result

Can you please show the lines of code that use 70 for the image id?

Also, if you can right-click on one of the images and show us the URL for it, something might be learned there too.

Hi, This the code on app.js

 <div className="row">
              <Card name="Dark Knight" role="Melee" avatarId={68} />
              <Card name="Dark Wizard" role="Range" avatarId={69} />
              <Card name="Elf" role="Healer" avatarId={70} />
        </div>

Also, here is the link it generated <img class="card-img-top" src="https://i.pravatar.cc/150?=68" alt="Card image cap">