I'm doing with my homework about React.
I'm tring to add Cards to the page and I created a Card.jsx and a CardList.jsx file to achieve this. And I used the faker to help generating some random fake info. However, when I imported the CardList.jsx to the App.js file and ran it, I saw nothing but while page on the browser. I just dont know why and I've almost copy the same as the teacher gave.
Please help me!
Here are the codes:
Card.jsx:
import React from "react";
const Card = (props) => {
return (
<div>
<img src={props.avatar} alt="food" />
<h3>{props.article_name}</h3>
<p>{props.description}</p>
<h4>{props.author_name}</h4>
</div>
)
}
export default Card
CardList.jsx
import React from "react";
import Card from './Card'
import { faker } from '@faker-js/faker'
const CardList = () => {
return (
<div>
<Card
avatar={faker.image.fashion()}
article_name={faker.definitions.title()}
description={faker.lorem.paragraph()}
author_name={faker.name.firstName + ' ' + faker.name.lastName}
/>
</div>
)
}
export default CardList
App.js
import './App.css';
import CardList from './CardList'
function App() {
return (
<div className="App">
<CardList />
</div>
);
}
export default App;
In your CardList.jsx change code to this :
<div>
<Card
avatar = {faker.image.fashion()}
article_name = {faker.definitions.title}
description = {faker.lorem.paragraph()}
author_name = {faker.name.firstName() + ' ' + faker.name.lastName()}
/>
</div>
Since faker.definitions.title is not a function. If you would open your browser console, you will see an error message regarding the same.Please make sure you write functions as functions and variables as variables by reading documentation.
firstName and lastName are functions so they need parentheses https://fakerjs.dev/api/name.html
Looking through the documentation, faker.definitions.title doesn't exist so you will need to use some other type of date for article_name
<div>
<Card
avatar={faker.image.fashion()}
article_name={faker.commerce.productName()} //using this as an example. replace with what you want
description={faker.lorem.paragraph()}
author_name={faker.name.firstName() + ' ' + faker.name.lastName()}
/>
</div>