Hey everyone, I'm currently working on a project in Next.js with a main file named Project.js. I'm running into some issues trying to export data from the main file to an object called Resume for the education section component...
import EduSection from "@/components/EduSection";
import ExpSection from "@/components/ExpSection";
import IntrestSection from "@/components/IntrestSection";
import Navbar from "@/components/Navbar";
import ProjectSection from "@/components/ProjectSection";
import ResumeHead from "@/components/ResumeHead";
import SkillSection from "@/components/SkillSection";
import React from "react";
function projects() {
let Resume = {
Head: {
firstName: "Abdullah",
lastName: "Naseer",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7914101817181b1d0c15151811484b4c484b4c391e14181015571a1614">[email protected]</a>",
phone: "03061356081",
about: "lorem lipsemmmm ",
},
exprience: [
{
companyName: "AirLift Express",
role: "Dispatch Coordinator",
duration: "March 2022, November 2022",
jobDes: "leremmmmmmmmm",
address: "Kohinoor, Faisalabad",
},
{
companyName: "Akount",
role: "Fr developer",
duration: "Jan 2011 - Feb 2015",
jobDes: "did This and that",
address: "San Monica, CA",
},
],
education: [
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
],
};
return (
<>
<Navbar />
<>
<link
href="https://fonts.googleapis.com/css?family=Lato:400,300,700"
rel="stylesheet"
type="text/css"
/>
<div className="container">
<ResumeHead {...Resume.Head} />
<div className="details">
<ExpSection exprience={Resume.exprience} />
<EduSection education={Resume.education} />
<ProjectSection />
<SkillSection />
<IntrestSection />
</div>
</div>
</>
</>
);
}
export default projects;
The problem lies within the EduSection where I am importing the subcomponent as EduItem.
import React from 'react'
import EduItem from './EduItem'
function EduSection(education) {
return (
<>
<div className="section">
<div className="section__title">Education</div>
<div className="section__list">
{education.map((education, index) => (
<EduItem key={index} {...education} />
))}
</div>
</div>
</>
)
}
export default EduSection;
import React from 'react'
function EduItem(name,address,duration,schoolName) {
return (
<>
<div className="section__list-item">
<div className="left">
<div className="name">{name}</div>
<div className="addr">{address}</div>
<div className="duration">{duration}</div>
</div>
<div className="right">
<div className="name">{schoolName}</div>
{/* <div className="desc">did This and that</div> */}
</div>
</div>
</>
)
}
export default EduItem
Everything is functioning correctly with the experience section but encountering an error specifically in the Education Section.
The error message received is: **Server Error TypeError: education.map is not a function.** Any console logs will show up in the terminal window. Appreciate any assistance provided.
The intended outcome was to pass props data from the main file to EduItem and then to EduSection, unfortunately, it's throwing an error.