feat: fixed

cv-project/.eslintrc.cjs

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

cv-project/src/components/educationInfo.jsx

@@ -1,42 +1,102 @@
 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>
-      <div className="education-info-form">
+      {isActive ? (
-        <input
+        <div className="education-info-form">
-          type="text"
+          <input
-          placeholder="School Name"
+            type="text"
-          value={schoolName}
+            placeholder="School Name"
-          onChange={(e) => setSchoolName(e.target.value)}
+            value={schoolName}
-        />
+            onChange={(e) => setSchoolName(e.target.value)}
-        <input
+          />
-          type="text"
+          <input
-          placeholder="Graduation Date"
+            type="text"
-          value={graduationDate}
+            placeholder="Graduation Date"
-          onChange={(e) => setGraduationDate(e.target.value)}
+            value={graduationDate}
-        />
+            onChange={(e) => setGraduationDate(e.target.value)}
-        <input
+          />
-          type="text"
+          <input
-          placeholder="Field of Study"
+            type="text"
-          value={fieldOfStudy}
+            placeholder="Field of Study"
-          onChange={(e) => setFieldOfStudy(e.target.value)}
+            value={fieldOfStudy}
-        />
+            onChange={(e) => setFieldOfStudy(e.target.value)}
-        <button>Submit</button>
+          />
-      </div>
+          <button
-      <div className="education-info">
+            type="submit"
-        <h2>School: {schoolName}</h2>
+            onClick={(e) => {
-        <p>
+              e.preventDefault();
-          Graduation Date: {graduationDate}
+              setSchools([
-          <br /> Field of Study: {fieldOfStudy}
+                ...schools,
-        </p>
+                {
-        <button>remove</button>
+                  school: schoolName,
-        <button>edit</button>
+                  concentration: fieldOfStudy,
-      </div>
+                  graduation: graduationDate,
+                },
+              ]);
+              setGraduationDate("");
+              setSchoolName("");
+              setFieldOfStudy("");
+            }}
+          >
+            Submit
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }