Issues with part 6 CRUD

[Leonardll]

Hi Paul,

Thank you for the great contest you have shared online. I am going following along your course then i got stuck on the below error which i don't understand as i have mirrored your code. Can you help me spot where i made a mistake please?

The error message is cannot read properties of undefined reading "id"

Skill.js is equivalent to your speaker.js

import Image from "next/dist/client/image";
import { FaTimes, FaRegCalendarAlt, FaSchool,FaSpinner } from "react-icons/fa";
import styles from '../../styles/Home.module.scss'
//import { FaStar } from 'react-icons/fa';
import { AiFillStar , AiOutlineStar } from 'react-icons/ai'
import { useState, useContext } from 'react';
import { CourseFilterContext } from "../contexts/CourseFilterContext";
import { SkillProvider, SkillContext } from "../contexts/SkillContext";

function Course({ courseTitle, hours, level, year }) {
return (
<>

Course : {courseTitle}{" "}


Hours: {hours}


Level : {level}


Year : {year}

</>
);
}

function Courses() {
const { courseYear } = useContext(CourseFilterContext);
const { skillCard } = useContext(SkillContext);
const courses = skillCard.courses;
const level = skillCard.level;

return (
  <div className={styles.courseBox, "h-250"}>
    {courses
    .filter(function (course) {
      return course.year === courseYear;
    })
    .map(function (course) {
      return (
        <Course {...course} level={level} key={skillCard.courses.id} />
      )
    })
    }        
  </div>  
);

}

function SkillImage() {
const { skillCard: {id, skill} } = useContext(SkillContext);
return (

<Image
src={/images/skill-${id}.png}
className="contain-fit"
alt={${skill}}
width="300"
height="300"
/>

);
}

function SkillFavorite () {
const { skillCard, updateRecord } = useContext(SkillContext);
const [inTransition, setInTransition] = useState(false);

function doneCallBack () {
  setInTransition(false);
  console.log(`In SkillFavorite: doneCallBack  ${new Date().getMilliseconds()}`)
}
return (
  <div className={styles.icon}>
    <span onClick={function () {
      setInTransition(true);
      updateRecord(
        {
          ...skillCard, favorite: !skillCard.favorite,
        },
        doneCallBack
      )
      }}>
    { skillCard.favorite === false ?
    <AiFillStar fill="orange"/> : <AiOutlineStar fill="yellow"/>
    }{" "}
    Favorite{" "}
    { inTransition === true ? (
      <span><FaSpinner className="fa-spin" fill="orange"/></span>
    ): null}
    </span>
  </div>
)

}
function SkillDescription() {
const { skillCard } = useContext(SkillContext);
const { skill, description, school, } = skillCard;
return (

{skill}

{description}

{/* /}

School

{school}

{/ /}
{/

Year

{courses[0].year}

*/}

);
}

function SkillAction () {
return (

<button
className="btn btn-primary w-100"
onClick={() => handleEditClick()}
>Edit

<FaTimes className="m-3 " fill="#ffc800" onClick={() => handleDeleteClick(idx)} />

);
}

function Skill({ skillCard, updateRecord }) {
const {id, skill, courses, level, year} = skillCard;
const { showCourses } = useContext(CourseFilterContext);
return (

{showCourses === true ?
: null}

);
}

export default Skill;