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