未捕获的错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数但得到：对象

Question

I'm trying to build my First reactjs site, protfolio project, Right now I'm at the skills section. I made a Skill file of an array of objects of my skills so that I could use map funtion in my Skills.jsx components and in fututre I could just add another skill object and map() will render it. Once done with the the array of objects my site was rendering but all of a sudden I got this error!!

//My Skills.jsx: Once I render this I will use props for the map function.
import React from "react";
function Skills() {
  return (
    <>
      <section className="skills">
        <div className="card">
          <div className="content">
            <img src="./src/assets/html5.svg" alt="htmlIcon" />
            <p>HTML</p>
          </div>
        </div>
      </section>
    </>
  );
}
export default Skills;
//My Skills JSON: (I have 10 objects in it.)

const skills = [
  {
    id: 1,
    icon: "./src/assets/html5.svg",
    iconName: "HTML",
  },
 ];
export default skills;

I want to render the Skill JSON obect in my Skills.jsx component using map function!!

Answer 1

Figured out the Map function, and I have successfully implemented it now all that is left is styling it!!

//Skills.jsx:
import React from "react";

function Skills(props) {
   return (
    <>
      <section className="skills">
        <div className="card">
          Skills
          <div className="content">
            <img src={props.icon} alt="htmlIcon" />
            <p>{props.iconName}</p>
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

//App.jsx:
import React from "react";
import Skills from "./Skills";
import skills from "./Skill";
import Footer from "./Footer";

function addSkill(skill) {
  return (
     <Skills
      key={skill.id}
      id={skill.id}
      icon={skill.icon}
      iconName={skill.iconName}
    />
  );
}
function App(){
      return(
       <>
         {skills.map(addSkill)}
       </>
      );
}
export default App;