import React from "react" ; import { Education } from "../../../../models" ; import { utils } from "../../utils/Utils" ; export function EducationComponent ( props ) { const listItems = props . data . map ( ( education , index ) => { return ( < div key = { index } className = "slide" > < div className = "box" > < div className = "dates" > { utils . formatDate ( education ?. startDate ) } - { " " } { utils . formatDate ( education ?. endDate ) || "Present" } < /div> < div className = "name" > { education ?. area } at { education ?. institution } < /div> < div className = "dates space-between" > { education ?. studyType && < span > { education ?. studyType } < /span>} { education ?. gpa && < span > GPA : { education ?. gpa } < /span>} < /div> < /div> { education ?. courses && education . courses . length > 0 && ( < div className = "courses half-box" > < div className = "name" > Courses < /div> { education . courses . map ( ( course , indexA ) => ( < li key = { indexA } > { course } < /li>))} < /div>)} < /div>); } ) ; return ( < div > < div > < h1 > Education < /h1> < /div> < div className = "flex-container" > { listItems } < /div>; < div className = "campfire" / > < /div>); }