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]);