Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

59
Vistas
passing data and mapping to my List component for display purpose but showing "undefined" text

I would like to show my project data with images and texts on my webpage. I created a ProjectList Component, where I am going to structure it in a presentable way, by mapping each part of the data to its desired display location. However, I am getting "undefined" on my webpage. I have a screenshot to show.enter image description here

Methods tried:

  1. change {`${name}`} to {name} ===> doesn't show anything. it's empty.
  2. change <img src={picture} alt={name} /> to <img src={`${picture}`} alt={name} /> ===> same as above

Here is my project component:

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>
    )
}

Here is my projectlist component:

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>

    )
}

Here is some of my sample data in 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: "",
    },
7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You are not handing your ProjectList component the data you want it to display. I think you want this instead:

   {projectdata.map(project => <ProjectList {...project} />)}
7 months ago · Juan Pablo Isaza Denunciar

0

Reason

You need to pass projectData Item to each ProjectList Component.


  • ... -> a spread operator, if properties u are using in PrrojectList as same as that of object u are spreading, then properties are auto-mapped, otherwise you have to do it individually.

  • key -> is required when doing a map. You can use index as the key. This helps react to manage rerenders

    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((project, index) => (
                          <ProjectList {...project} key={index} /> 
                      ))}
                  </ul>
              </div>
          )
      }
    
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.