Me gustaría mostrar los datos de mi proyecto con imágenes y textos en mi página web. Creé un componente ProjectList, donde voy a estructurarlo de una manera presentable, asignando cada parte de los datos a su ubicación de visualización deseada. Sin embargo, estoy obteniendo "indefinido" en mi página web. Tengo una captura de pantalla para mostrar.
Métodos probados:
{`${name}`}
a {name}
===> no muestra nada. esta vacio.<img src={picture} alt={name} />
a <img src={`${picture}`} alt={name} />
===> igual que arribaAquí está mi componente de proyecto:
import "./Project.scss" import ProjectList from "./ProjectList/ProjectList" import { projectdata } from "./ProjectData.js" export default function Project() { return ( <div className='project' id='project'> <h1>Project</h1> <ul> {projectdata.map(() => ( <ProjectList /> ))} </ul> </div> ) }
Aquí está mi componente de lista de proyectos:
import "./ProjectList.scss" import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule'; export default function ProjectList({ name, picture, description, tech, url, source }) { return ( <li className="projectlist"> <div className="container"> <div className="image"> <img src={picture} alt={name} /> </div> <h2>{`${name}`} {console.log(name)} </h2> <HorizontalRuleIcon className='horizontalrule'></HorizontalRuleIcon> <span>{`${description}`}</span> </div> </li> ) }
Aquí hay algunos de mis datos de muestra en js:
export const projectdata = [ { id: 'Featured', title: 'Featured', name: 'LaoSpicy', picture: 'assets/images/tenor.png', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', tech: [""], url: '', GitHub: "", },
No le está entregando a su componente ProjectList
los datos que desea que muestre. Creo que quieres esto en su lugar:
{projectdata.map(project => <ProjectList {...project} />)}
Razón
Debe pasar projectData Item
a cada componente ProjectList
.
...
-> un operador de distribución, si las propiedades que está utilizando en PrrojectList
son las mismas que las del objeto que está distribuyendo, entonces las propiedades se asignan automáticamente; de lo contrario, debe hacerlo individualmente.
key
-> es necesaria cuando se hace un mapa. Puede usar el índice como clave. Esto ayuda a reaccionar para administrar los rerenders
importar "./Project.scss" importar ProjectList desde "./ProjectList/ProjectList" importar { projectdata } desde "./ProjectData.js"
export default function Project() { return ( <div className='project' id='project'> <h1>Project</h1> <ul> {projectdata.map((project, index) => ( <ProjectList {...project} key={index} /> ))} </ul> </div> ) }