Question

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.

Methods tried:

change {`${name}`} to {name} ===> doesn't show anything. it's empty.
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

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-09T06:48:07.271Z

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