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:

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: "",
    },

CodePudding user response：

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

CodePudding user response：

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