Hi guys ! I am having issues with React Form and Router ! | Scrimba | Page 1

willow pike · 2022-12-25T00:48:44.086Z

```js return ( <> Where in the World? Dark Mode } /> } /> ); } ``` making the form input lag

willow pike Dec 25, 2022, 12:48 AM

#

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 the form input lag

#

(the form comes from RenderCountries)

#

  return (
    <form>
      <input
        value={searchByCountry}
        type="text"
        placeholder="search for a country"
        onChange={(e) => setSearchByCountry(e.target.value)}
      />
    </form>
  );
}
``` when that is alone everything works just fine !

willow pike Dec 25, 2022, 1:32 AM

#

huh it seems that instead of updating the component element={} re-creates it
I haven't found a solution to it and I'm going to bed, if anyone comes here and has a solution please leave it here I'll read it with pleasure tomorrow ❤️

vague root Dec 25, 2022, 3:34 AM

#

Huge input lag? What does it imply? I don't understand.

#

You do not need to wrap the arrow function around the event handler. The event is automatically passed to the handler function.

willow pike Dec 25, 2022, 10:42 AM

#

vague root You do not need to wrap the arrow function around the event handler. The event i...

I will take a little video of it cause it makes way more sense

#

But it’s like every time I write something in the form the component unmount then re mount

#