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 ( <> <span className={styles.course}> Course : {courseTitle}{" "} <span className={styles.course}> Hours: {hours}
<span className={styles.course}> Level : {level} <span className={styles.course}> 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 ( <div className="speaker-img d-flex flex-row justify-content-center align-items-center h-300"> <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 (

<h3 className="text-truncate text-justify w-200"> {skill} <SkillFavorite /> <p className="text-justify skill-info">{description} <div className="social d-flex flex-row mt-4 justify-content-between"> <div className="school mb-2"> {/* <FaSchool className="m-3 align-middle " fill="#000"/> /}

School

{school}

<div className="calendar mb-2"> {/ <FaRegCalendarAlt className="m-3 align-middle " fill="#000"/> /} {/

Year

{courses[0].year}

*/}

); }

function SkillAction () { return ( <div className="row mb-2"> <button className="btn btn-primary w-100" onClick={() => handleEditClick()} >Edit <div className="row mt-2"> <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 ( <SkillProvider skillCard={skillCard} updateRecord={updateRecord}> <div key={id} className="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-sm-12 col-xs-12"> <div className="card card-height p-4 mt-4 mb-2 h-300"> <SkillImage /> <div className="card-body"> <SkillDescription /> {showCourses === true ? <Courses /> : null} <div className="card-footer"> <SkillAction /> </SkillProvider> ); }

export default Skill;