React Scenario Questions(useContext & useNavigate )

1. 1. Login Scenario: User enters name in Login page and goes to Dashboard page. Username should be visible in Dashboard. Which hook stores the username and which hook navigates to Dashboard?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import { createContext, useState } from "react"
import Login from "./Login"
import Dashboard from "./Dashboard"

export const nameContext = createContext()

function App() {

  const [name, setName] = useState("")

  return (
    <nameContext.Provider value={{ name, setName }}>

      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>

    </nameContext.Provider>
  )
}

export default App

Login.jsx

import { useContext } from "react"
import { useNavigate } from "react-router-dom"
import { nameContext } from "./App"

function Login() {

  const { name, setName } = useContext(nameContext)

  const navigate = useNavigate()

  function LoginPage() {
    navigate("/dashboard")
  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={LoginPage}>
        Login
      </button>

    </div>
  )
}

export default Login

Dashboard.jsx

import { useContext } from "react"
import { nameContext } from "./App"

function Dashboard() {

  const { name } = useContext(nameContext)

  return (
    <div>

      <h1>Dashboard</h1>

      <h2>Welcome {name}</h2>

    </div>
  )
}

export default Dashboard

OUTPUT :

2. Logout Scenario: User clicks Logout in Dashboard and should go back to Login page. Login data should be cleared. Which hooks will you use?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>
      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>


        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />

        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>

    </div>
  )
}

export default Dashboard

OUTPUT :

3. Name Sharing Scenario: User enters name in Home page and Profile page shows the same name. How will you share the data between pages?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

//   useEffect(() => {

//     console.log("Component Rendered")

//   }, [])

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>
      <button onClick={handleNext}>Go To Profile</button>

    </div>
  )
}

export default Dashboard

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>

        </div>
  )
}
export default Profile

OUTPUT :

4. Button Navigation Scenario: User clicks Next button in Home page and About page should open. Which hook will you use?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"

function App() {

  return (

    <Routes>

      <Route path="/" element={<Home />} />

      <Route path="/about" element={<About />} />

    </Routes>

  )
}

export default App

Home.jsx

import { useNavigate } from "react-router-dom"

function Home() {

  const navigate = useNavigate()

  function NextPage() {

    navigate("/about")

  }

  return (

    <div>

      <h1>Home Page</h1>

      <button onClick={NextPage}>
        Next
      </button>

    </div>

  )
}

export default Home

About.jsx

function About() {

  return (

    <div>

      <h1>About Page</h1>

    </div>

  )
}

export default About

OUTPUT :

5. Back Navigation Scenario: User moves from Home page to Details page and clicks Back button to return Home. How will you implement navigation?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>
      {/* <Login /> */}
    </div>
  )
}

export default App

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>
       <button onClick={handelBack}>Back</button>
        </div>
  )
}
export default Profile

OUTPUT :