React TextField with collapse

Question

How to hide the lists of cities when the textfield is empty and when the user start typing the lists will show.

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>

Answer 1

You have to take state variable in which you have to store whatever user is typing:

const [text,setText] = useState("");

and in your filterLocations you have to update its value

const filterLocations = (txt) => {
    setText(txt.target.value);  
    let filteredLocations = locations.filter((e) =>
    e.name.toLowerCase().includes(txt.target.value.toLowerCase())
    );
    setSearchParameter(filteredLocations);
  };

And Finally in your render, render ul conditioanlly

{ !!text && <ul>
        {searchParameter.map((location) => (
          <li key={location.name}>{location.name}</li>
        ))}
      </ul>}

https://codesandbox.io/s/dreamy-roentgen-0jnoi?file=/src/LocationWidget.js

Answer 2

please find below code.

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>}
</>
);
}

Answer 3

You'd like to set an 'input' eventListener on the input field. And check if the inputField length > 0, then set the setViewLocationList(true); and if the inputField length === 0, then set the setViewLocationList(false) .