Undefined Error: TypeError: Cannot read properties of undefined (reading 'Icon')-CodePudding

I've been playing around with NextJS and TypeScript by watching a few videos and going through tutorials online. Until recently I have not run in to an issue, but am stuck on this. I've gone through my type.ts, resumeData.ts, and my Bar.tsx and my vsCode is not giving me any problem errors (of course I'm aware that it does not pick up everything).

I had no issue with the name, and level but for some reason seem to be missing why I am getting an undefined error in my Bar.tsx inside const Bar:... (besides the obvious of it saying it is not defined) and am unsure even where it should be defined or how.

I have gone ahead and posted each of the above mentioned files below.

Thanks for any help or suggestions on this.

Bar.tsx

import { FunctionComponent } from "react";
import { ISkill } from "../type";
import { motion } from "framer-motion";

const Bar: FunctionComponent<{ value: ISkill }> = ({
  value: { Icon, name, level },
}) => {
  const bar_width = `${level}%`;

  const variants = {
    initial: {
      width: 0,
    },
    animate: {
      width: bar_width,
      transition: {
        duration: 0.4,
        type: "spring",
        damping: 10,
        stiffness: 100,
      },
    },
  };

  return (
    <div className="my-2 text-white bg-gray-300 rounded-full dark:bg-dark-300 dark:bg-black-500">
      <motion.div
        className="flex items-center px-4 py-1 rounded-full bg-gradient-to-r from-green to-blue-600"
        style={{ width: bar_width }}
        variants={variants}
        initial="initial"
        animate="animate"
      >
        <Icon className="mr-3" />
        {name}
      </motion.div>
    </div>
  );
};

export default Bar;

type.ts

import { IconType } from "react-icons/lib";

export interface IService {
  Icon: IconType;
  title: string;
  about: string;
}

export interface ISkill {
  Icon: IconType;
  name: string;
  level: string;
}

export interface IProject {
  name: string;
  description: string;
  image_path: string;
  deployed_url: string;
  github_url: string;
  category: Category[];
  key_techs: string[];
}

export type Category = "react" | "mongo" | "express" | "django" | "node";

resumeData.ts

import { ISkill } from "../type";
import { BsCircleFill } from "react-icons/bs";

export const languages: ISkill[] = [
  {
    Icon: BsCircleFill,
    name: "Python",
    level: "70%",
  },
  {
    Icon: BsCircleFill,
    name: "JavaScript",
    level: "60%",
  },
  {
    Icon: BsCircleFill,
    name: "React Native",
    level: "80%",
  },
  {
    Icon: BsCircleFill,
    name: "React",
    level: "70%",
  },
  {
    Icon: BsCircleFill,
    name: "Django",
    level: "80%",
  },
  {
    Icon: BsCircleFill,
    name: "Bootstrap",
    level: "80%",
  },
];

export const tools: ISkill[] = [
  {
    Icon: BsCircleFill,
    name: "Figma",
    level: "85%",
  },
  {
    Icon: BsCircleFill,
    name: "Photoshop",
    level: "45%",
  },
  {
    Icon: BsCircleFill,
    name: "Illustrator",
    level: "60%",
  },
  {
    Icon: BsCircleFill,
    name: "Framer",
    level: "70%",
  },
];

CodePudding user response：

const Bar: FunctionComponent<{ value: ISkill }> = ({
  value: { Icon, name, level },
}) => {
// Your code ...
}

Here the error is coming from line 2: value: {Icon, name, level}. The value coming via props seems to be undefined. Check where the Bar component is used and if the props are passed properly.

Example:

<Bar value={{Icon: YourIcon, name: "...", level: "..."}}/>

CodePudding user response：

If there's a possibility that Icon is undefined, you can always test for its value before attempting to include it in your JSX. This should at least eliminate the error.

{Icon && (<Icon className="mr-3" />)}

To determine why Icon is undefined in the first place, you have to look at the parent component that's including <Bar> to see where the Icon property is not properly being set in the value object.