Why can't I import this CardList in JSX?

Question

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;

overview of the vs code

Answer 1

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.

Answer 2

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>