I have a text input which looks like this:
<input
placeholder="Search by City, Zip Code, or Name"
type="text"
className="searchBar"
value={this.state.search}
onChange={(e) => this.setState({ search: e.target.value })}
onKeyDown={this.keySearch}
></input>
My problem here is let's say I type the word hello. Only after 5 seconds does it show up, and each type I type a letter it takes 5 seconds to show up in the text input. It should be instantaneous.
This is not a browser or computer problem.
On another page on my website a have a text input written similarly to the one above, and it is perfectly fine.
Is this because I have so much state in my constructor?
constructor(props) {
super(props);
this.state = {
shops: [],
burger: "0",
pointerEvents: "none",
width: "30px",
logout: "none",
login: "flex",
loadingMAP: true,
search: "",
modal: true,
addresses: [],
currentPosition: {},
userLocation: { lat: 39.0119, lng: -98.4842 },
zoom: 4,
loadingMAP2: "block",
dashboard: "none",
FetchingData: "block",
showMap: "flex",
gridlistDisplay: "flex",
showmaptext: "Show map",
MapBoxDisplay: "block",
loadingShopBusinesses: "none",
shopbusinessesmapbox: [],
count: 0,
};
}
Or is this another problem?
Please help and thanks.
My full code:
https://gist.github.com/rherugu/510fabd4dd89da080a843f61ec1881e0