0
146
Vistaspasar datos y mapear a mi componente List para fines de visualización pero mostrando texto "indefinido"
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:
- cambie
{`${name}`}a{name}===> no muestra nada. esta vacio. - cambie
<img src={picture} alt={name} />a<img src={`${picture}`} alt={name} />===> igual que arriba
Aquí 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: "", },2 Respuestas
Responde la pregunta0
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} />)}0
Razón
Debe pasar projectData Item a cada componente ProjectList .
...-> un operador de distribución, si las propiedades que está utilizando enPrrojectListson 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 losrerendersimportar "./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> ) }