I am having a scenario like, IF user Enters 5 character or more , Then the search bar should display the Full location... As Of Now it is working when I clicked on the Button , But I need to get the full address into the search bar when I enter 5 characters without clicking on the button....... For example : If I type Dallas in the search bar , then it should show like this : "Dallas, Texas, United States" without clicking on the button...... Please can Anyone help me in this, Thanks in advance
Here is my code
import React, { useState } from 'react'
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as getallcoordiantes from '../../src/Redux/googlemaps/bigbasket.actions';
const GetGeoCoordinates = () => {
const [storeDetails, setstoreDetails] = useState({
name: ""
});
const [validCityName, setvalidCityName] = useState(false)
const [refObj, setrefObj] = useState({
geo: {
lat: 32.776272,
long: -96.796856,
},
name: "Dallas",
palce: "US",
});
const [warning, setwarning] = useState("");
const dispatch = useDispatch();
const storeInfo = useSelector((state) => state.fetchAllData.storeInfo);
useEffect(() =>{
if(storeInfo?.features){
//console.log(storeInfo?.features[0]?.place_name)
//setstoreDetails({ name: storeInfo?.features[0]?.place_name });
const coordinates = storeInfo?.features[0]
? storeInfo?.features[0].center
: [];
// console.log(coordinates);
//console.log(storeInfo?.features[0]?.text);
if(coordinates[0] === refObj.geo.long && coordinates[1] === refObj.geo.lat){
if (refObj.name !== storeInfo?.features[0]?.text) {
setwarning("Entered City Name is Invalid");
} else {
setstoreDetails({ name: storeInfo?.features[0]?.place_name });
setwarning("");
}
} else {
setwarning("Please Enter a Valid City");
}
}
},[storeInfo])
const hanldeChange = (e) => {
let newStoreDetails = { ...storeDetails };
newStoreDetails[e.target.name] = e.target.value;
// console.log(newStoreDetails);
setstoreDetails(newStoreDetails)
}
const getStoreDetails = () => {
if(storeDetails.name.length <=4){
setvalidCityName(true)
}else{
setvalidCityName(false);
dispatch(getallcoordiantes.fetchcoordinates(storeDetails.name));
}
}
return (
<div>
<h2>Search For Store</h2>
<form>
<input type="text" name="name" value={storeDetails.name} onChange={(e) => { hanldeChange(e) }} />
<button onClick={getStoreDetails} type="button">Get Location</button>
</form>
{validCityName && <p>Type Minimum 5 Characters</p>}
<p>{warning}</p>
</div>
)
}
export default GetGeoCoordinates
CodePudding user response:
You just need to add 1 useEffect
hook which will watch for changes of storeDetails?.name
and will execute your getStoreDetails
function, the one that is attached as button click handler, on any change of name
entered.
const getStoreDetails = () => {
if (storeDetails.name.length <= 4) {
setvalidCityName(true);
} else {
setvalidCityName(false);
dispatch(getallcoordiantes.fetchcoordinates(storeDetails.name));
}
};
useEffect(() => {
getStoreDetails();
}, [storeDetails?.name]);