#Hi guys ! I am having issues with React Form and Router !

1 messages · Page 1 of 1 (latest)

main seal
# 
return (
    <>
      <nav className="navigation">
        <div className="nav-items">
          <h1 className="website-title">Where in the World?</h1>
          <button className="theme-button">Dark Mode</button>
        </div>
      </nav>
      <main className="main-container">
        <Routes>
          <Route path="/" element={<RenderCountries />} />
          <Route path="/country/:id" element={<CountryPage />} />
        </Routes>
      </main>
    </>
  );
}```
^ making everything lag
# 
 return (
    <form>
      <input
        value={searchByCountry}
        type="text"
        placeholder="search for a country"
        onChange={(e) => setSearchByCountry(e.target.value)}
      />
    </form>
  );
}```
works perfectly without lagging
The form is in RenderCountries by the way
cannot render it outside or it won't look like the design I have
#

I've read that it's because it was unmounting remounting the component or something (I'm very new to that)

#

but, there was apparently a render method in v5 to avoid that

#

but I can't find it in v6 idk :/

#

if you go here you can clearly see that the form isn't forming 😢