Estoy haciendo mi tarea sobre React.
Estoy tratando de agregar tarjetas a la página y creé un archivo Card.jsx y CardList.jsx para lograrlo. Y usé al faker para ayudar a generar información falsa al azar. Sin embargo, cuando CardList.jsx al archivo App.js y lo ejecuté, no vi nada más que una página en el navegador. Simplemente no sé por qué y casi he copiado lo mismo que dio el maestro.
¡Por favor, ayúdame!
Aquí están los códigos:
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;En su CardList.jsx cambie el código a esto:
<div> <Card avatar = {faker.image.fashion()} article_name = {faker.definitions.title} description = {faker.lorem.paragraph()} author_name = {faker.name.firstName() + ' ' + faker.name.lastName()} /> </div>Dado que faker.definitions.title no es una función. Si abre la consola de su navegador, verá un mensaje de error relacionado con el mismo. Asegúrese de escribir funciones como funciones y variables como variables leyendo la documentación.
firstName y lastName son funciones, por lo que necesitan paréntesis https://fakerjs.dev/api/name.html
Mirando a través de la documentación, faker.definitions.title no existe, por lo que deberá usar algún otro tipo de fecha para 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>