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

Hey can you open console of your browser and see what's there in the error. — Abhishek Mittal, Aug 19 '22 at 05:47
I don't see any overt issues with the code. How are you running the app? Are there any errors in the console? It doesn't seem like you've any issue importing the components. Have you inspected the DOM to see what ***is*** being rendered? Sometimes you pick bad CSS like white text on a white background, or have visually hidden elements, etc. — Drew Reese, Aug 19 '22 at 05:49
His issue was with faker js, he called function where it was not supposed to be a function. I tested it out and write an answer. — Abhishek Mittal, Aug 19 '22 at 05:58
btw, use camelCase for your props: author_name => authorName — Shahriar, Aug 19 '22 at 05:59
@AbhishekMittal good catch, undefined errors get past your eyes sometimes! — DrZoo, Aug 19 '22 at 06:00
Yeah exactly. I just run his code real quick and inspected the console. — Abhishek Mittal, Aug 19 '22 at 06:03

Abhishek Mittal · Accepted Answer · 2022-08-19T06:21:06.930

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.

score 0 · Answer 2 · answered Aug 19 '22 at 06:16

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>

Why can't I import this CardList in JSX?

2 Answers2