feat: fixed

cv-project/.eslintrc.cjs

@@ -2,20 +2,21 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
+    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off",
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

cv-project/src/components/educationInfo.jsx

@@ -1,12 +1,62 @@
 import { useState } from "react";
 
 export default function EducationInfo() {
+  const [education, setEducation] = useState([]);
+  const [educationItemActive, setEducationItemActive] = useState(false);
+
+  return (
+    <div>
+      {education.length <= 0 ? (
+        <>
+          <p>Add your Education info</p>
+        </>
+      ) : (
+        <EducationDisplay schools={education} />
+      )}
+      <button
+        onClick={() => {
+          setEducationItemActive(!educationItemActive);
+        }}
+      >
+        Add Education Info
+      </button>
+      <EducationItem
+        isActive={educationItemActive}
+        schools={education}
+        setSchools={setEducation}
+      />
+    </div>
+  );
+}
+
+function EducationDisplay(props) {
+  return (
+    <div>
+      {props.schools.map((item) => {
+        return (
+          <div key={item.school} className="education-info">
+            <h2>School: {item.school}</h2>
+            <p>
+              Graduation Date: {item.graduation + " "}
+              Field of Study: {item.concentration}
+              <button>edit</button>
+              <button>remove</button>
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function EducationItem({ isActive, schools, setSchools }) {
   const [graduationDate, setGraduationDate] = useState("");
   const [schoolName, setSchoolName] = useState("");
   const [fieldOfStudy, setFieldOfStudy] = useState("");
 
   return (
     <div>
+      {isActive ? (
         <div className="education-info-form">
           <input
             type="text"
@@ -26,17 +76,27 @@ export default function EducationInfo() {
             value={fieldOfStudy}
             onChange={(e) => setFieldOfStudy(e.target.value)}
           />
-        <button>Submit</button>
-      </div>
-      <div className="education-info">
-        <h2>School: {schoolName}</h2>
-        <p>
-          Graduation Date: {graduationDate}
-          <br /> Field of Study: {fieldOfStudy}
-        </p>
-        <button>remove</button>
-        <button>edit</button>
+          <button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              setSchools([
+                ...schools,
+                {
+                  school: schoolName,
+                  concentration: fieldOfStudy,
+                  graduation: graduationDate,
+                },
+              ]);
+              setGraduationDate("");
+              setSchoolName("");
+              setFieldOfStudy("");
+            }}
+          >
+            Submit
+          </button>
         </div>
+      ) : null}
     </div>
   );
 }