import React, { useState } from "react";
          

              function UserProfile() {



                const [user, setUser] = useState(null);

                const login = () =>{
                    setUser({name: "manoj", email: "manoj@gmail.com"});
                }

                const logout = () =>{
                    setUser(null)
                }
               



                return (
                  <div>
                    {user ? (
                      <div>
                        <p>Welcome, {user.name}!</p>
                        <p>Email: {user.email}</p>
                        <button onClick={logout}>Logout</button>
                      </div>
                    ) : (
                      <div>
                        <p>Please log in</p>
                        <button onClick={login}>Login</button>
                      </div>
                    )}
                  </div>
                );
              }

              export default UserProfile;

              

1. Create Provider: /contexts/Context API/user-context-provider.jsx

                import { useState, createContext } from "react";

                export const UserContext = createContext();

                export const UserContextProvider = ({ children }) => {
                  const [user, setUser] = useState(null);

                  const login = () => {
                    setUser({ name: "pedro", email: "pedro@pedrotech.co" });
                  };

                  const logout = () => {
                    setUser(null);
                  };

                  const contextValue = {
                    user,
                    login,
                    logout,
                  };

                  return (
                    <UserContext.Provider value={contextValue}>
                      {" "}
                      {children}
                    </UserContext.Provider>
                  );
                };

2. App.jsx

import "./App.css";
import UserProfile from "./UserProfile";
import { UserContextProvider } from "./contexts/Context API/user-context-provider";

function App() {
  return (
    <>
      <UserContextProvider>
        <UserProfile />
      </UserContextProvider>
    </>
  );
}

export default App;

3. UserProfile.jsx

import React, { useContext } from "react";
import { UserContext } from "./contexts/Context API/user-context-provider";


function UserProfile() {
  const { user, login, logout } = UserContext(UserContext);
  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.name}!</p>
          <p>Email: {user.email}</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please log in</p>
          <button onClick={login}>Login</button>
        </div>
      )}
    </div>
  );
}

export default UserProfile;

1. create store

              import { create } from "zustand";

              export const useUserStore = create((set) => ({
                user: null,
                login: () => set({ user: { name: "pedro", email: "pedro@pedrotech.co" } }),
                logout: () => set({ user: null }),
              }));

              

2. UserProfile.jsx

                    import React, { useContext } from "react";
                    import { UserContext } from "./contexts/Context API/user-context-provider";
                    import { useUserStore } from "./contexts/zustand/useUserStore";

                    function UserProfile() {
                      const { user, login, logout } = useUserStore();
                      return (
                        <div>
                          {user ? (
                            <div>
                              <p>Welcome, {user.name}!</p>
                              <p>Email: {user.email}</p>
                              <button onClick={logout}>Logout</button>
                            </div>
                          ) : (
                            <div>
                              <p>Please log in</p>
                              <button onClick={login}>Login</button>
                            </div>
                          )}
                        </div>
                      );
                    }

                    export default UserProfile;