I would like to hide a list of symbols before I start looking into them with search engine.

Here is how it looks when I click on dropdown.

[![enter image description here](https://i.stack.imgur.com/EEVjZ.png)](https://i.stack.imgur.com/EEVjZ.png)

As you can see when I click I immediately see the whole list.

How I can hide it up and just start showing when I enter query?

For example if I write in `Symbol` field `AD` it should show me only `ADABTC` and if I write `ET` it should show me `ETHBTC` and `ETCBTC` and etc.

**CODE HERE**

```
import React from "react";
import { Button } from "react-bootstrap";

const symbols = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

function PriceTriggerField() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>
      <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChange}
      />
       <input
        type="number"
        placeholder="Price"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
      <Button variant="secondary">Set</Button>
    </div>
  );
}

export default PriceTriggerField;

```

**EDIT1**
After adding @Kalhan.Toress answer I receive a strange `0` when I just clicked a dropdown

[![enter image description here](https://i.stack.imgur.com/GsthF.png)](https://i.stack.imgur.com/GsthF.png)