Cómo ocultar las listas de ciudades cuando el campo de texto está vacío y cuando el usuario comience a escribir, se mostrarán las listas.
https://codesandbox.io/s/loving-platform-t2cyb?file=/src/LocationWidget.js
const openSearch = () => { setViewLocationList(true); startSearch(); }; const stopSearch = () => { setSearchParameter('') setViewLocationList(false); }; <TextField variant="outlined" placeholder="Search Locations" onFocus={openSearch} onChange={filterResults} value={searchParameter} classes={{notchedOutline:classes.input}} InputProps={{ endAdornment: ( <IconButton onClick={stopSearch} edge="end"> <ClearIcon /> </IconButton> ), classes:{notchedOutline:classes.noBorder}, startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} /> </Box> <Collapse in={viewLocationList} sx={{ my: '2px' }}> <Box className="rounded-scrollbar widget-result-container"> {filteredLocations.map((location, index) => ( <LocationWidgetItem key={index} location={location} onClickLocation={setActiveLocation} /> ))} </Box> </Collapse>Debe tomar la variable de estado en la que debe almacenar lo que el usuario esté escribiendo:
const [text,setText] = useState("");y en tu filterLocations tienes que actualizar su valor
const filterLocations = (txt) => { setText(txt.target.value); let filteredLocations = locations.filter((e) => e.name.toLowerCase().includes(txt.target.value.toLowerCase()) ); setSearchParameter(filteredLocations); };Y finalmente en su render, render ul condicionalmente
{ !!text && <ul> {searchParameter.map((location) => ( <li key={location.name}>{location.name}</li> ))} </ul>}https://codesandbox.io/s/dreamy-roentgen-0jnoi?file=/src/LocationWidget.js
por favor encuentre el código a continuación.
export default function LocationWidget({ locations }) { const [searchParameter, setSearchParameter] = useState(locations); const [inputText, setInputText] = useState(null); const filterLocations = (txt) => { setInputText(txt.target.value); let filteredLocations = locations.filter((e) => e.name.toLowerCase().includes(txt.target.value.toLowerCase()) ); setSearchParameter(filteredLocations); }; return ( <> <input type="text" onChange={filterLocations} /> {inputText && <ul> {searchParameter.map((location) => ( <li key={location.name}>{location.name}</li> ))} </ul>} </> ); }Le gustaría establecer un eventListener de 'entrada' en el campo de entrada. Y verifique si la longitud del campo de entrada> 0, luego configure setViewLocationList(true); y si la longitud del campo de entrada === 0, establezca setViewLocationList(false) .