I have a question .

ivadam00 — Fri, 17 Mar 2023 14:35:28 +0000

how do i change or remove state value when i click to a link or navigation link and it should render that link page in react.
if anyone know please tell me..

edit :-

so here is my problem which im asking for help

assume i have basic react app code here like some routes..

//app.jsx
import from "./components/MainHomePage"
import from "./components/About"
import from "./components/Contact"

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Navbar />} />
      <Route index element={<MainHomePage />} />
      <Route path="about" element={<About />} />
      <Route path="contact" element={<Contact />} />
      <Route path="blog" element={<Blog />} />
    </Route>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

assume i have some content written in each route page
now look into my navbar component

//Navbar.jsx
import {useState} from "react"

const Navbar = () => {

const [text, setText] = useState('')

const handleChange = (e) => {
       setText(e.target.value)
}

const handleSubmit = (e) => {
       e.preventDefault() //prevent default page refresh behavior
       setText('') //to empty input box
}
return (
    <nav>
       <ul className="navbar-links">
         <li> 
            <Link to={"/"}> Home </Link>
         </li>
         <li> 
            <Link to={"/contact"}> Contact </Link>
         </li>
         <li> 
            <Link to={"/about"}> About </Link>
         </li>
         <li> 
            <Link to={"/blog"}> Blog </Link>
         </li>
       </ul>

       <div className="navbar-search-box">
         <form onSubmit={handleSubmit}>
             <input type="text" value={text} onChange={handleChange}>
             <button type="submit"> Search </button> 
         </form>
       </div>
    </nav>
)
}

here is my root layout component

//RootLayout.jsx

import Navbar from "./component/Navbar"
import {Outlet} from "react-router-dom"

const RootLayout = () => {
    return(
     <>
       <Navbar />
       <Outlet />
     </>
)
}

so now i want to do when i type in the search input box and when i click on search button it will set state to that text and render result page or any particular result but when click to any other navlink from navbar my result page whatever we searched it is not changing the state to empty and my new page whichever we clicked from navbar is not rendering becuase of state, it is a bug so how do i solve this after searching and when i want to navigate to other navbar pages i want to remove result page and state should be empty and render new route page..

i hope i explained ...

Question :--

ivadam00 — Tue, 27 Sep 2022 04:25:31 +0000

How to take dependent select box option value using javaScript and and do something with it and show it in html document.

im beginner in web development :(

DEV Community: ivadam00

I have a question .

Question :--