Exercise 1: Create a Context for User Information

• In your existing App application, create a new context called UserContext that will hold the user’s information (name, age, and incrementAge function).
• Create a new file UserContext.jsx and set up the context.

import React, { createContext } from 'react';

const UserContext = createContext();

export default UserContext;

Exercise 2: Provide Context in the App Component

• Wrap the UserInfo and Counter components within a UserContext.Provider in the App.jsx component.
• Pass the user’s information and incrementAge function as the context value.

import React, { useState } from 'react';
import Counter from './Counter';
import UserInfo from './UserInfo';
import UserContext from './UserContext';

const App = () => {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John Doe', age: 25 });

  const incrementCount = () => {
    setCount(count + 1);
  };

  const incrementAge = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  const contextValue = {
    name: user.name,
    age: user.age,
    incrementAge,
  };

  return (
    <UserContext.Provider value={contextValue}>
      <h1>Dashboard</h1>
      <Counter count={count} incrementCount={incrementCount} />
      <UserInfo />
    </UserContext.Provider>
  );
};

export default App;

Exercise 3: Consume the Context in UserInfo

• Modify UserInfo.jsx to consume the context instead of receiving props directly.
• Use the useContext hook to access the user’s name, age, and incrementAge function from UserContext.

import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserInfo = () => {
  const { name, age, incrementAge } = useContext(UserContext);

  return (
    <div>
      <h2>User Info</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={incrementAge}>Increase Age</button>
    </div>
  );
};

export default UserInfo;

Exercise 4: Test the Application

• Run your application and ensure that the UserInfo component correctly displays the user’s name and age, and that clicking the "Increase Age" button updates the age.
• Verify that no props are being passed directly to UserInfo in App.jsx.