Prompt Title: College Highest Qualification.

To create a Context API in React, follow these steps:

1. Create a new file named SkillContext.js and import React and createContext:

javascriptCopy code
import React, { createContext } from "react";

2. Create a new context using the createContext() method:

javascriptCopy code
export const SkillContext = createContext();

3. Create a new SkillProvider component that will wrap your components that need to access the global state. In this component, you can define the state for your skills:

javascriptCopy code
export const SkillProvider = ({ children }) => {
  const [skills, setSkills] = useState([]);

  return (
    <SkillContext.Provider value={{ skills, setSkills }}>
      {children}
    </SkillContext.Provider>
  );
};

4. In your App.js file, wrap the components that need to access the global state inside the SkillProvider component:

javascriptCopy code
function App() {
  return (
    <SkillProvider>
      <Register />
      <Home />
      <Profile />
    </SkillProvider>
  );
}

5. In your Register.js component, import the SkillContext and use the setSkills method to update the skills:

javascriptCopy code
import { SkillContext } from "./SkillContext";

function Register() {
  const { setSkills } = useContext(SkillContext);

  const handleSkillsChange = (event) => {
    setSkills(event.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleSkillsChange} />
    </div>
  );
}

6. In your Home.js and Profile.js components, import the SkillContext and use the skills state:

javascriptCopy code
import { SkillContext } from "./SkillContext";

function Home() {
  const { skills } = useContext(SkillContext);

  return (
    <div>
      <h1>Skills</h1>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

function Profile() {
  const { skills } = useContext(SkillContext);

  return (
    <div>
      <h1>Profile</h1>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
      <button>Update Skills</button>
    </div>
  );
}

In this way, you can use the Context API to globally store the skills state and display it in the Home and Profile components.