score:1

Accepted answer

try it. i fixed what you asked

import react, { usestate, useeffect } from "react";

const assets = [
  "adabtc",
  "aionbtc",
  "algobtc",
  "ardrbtc",
  "kavabtc",
  "ethbtc",
  "etcbtc"
];

export default function app() {
  const [queries, setqueries] = usestate([]);
  const [symbol, setsymbol] = usestate("");
  const [price, setprice] = usestate("");
  const [dropdown, setdropdown] = usestate([]);

  const onchangesymbol = e => {
    setsymbol(e.target.value);
  };

  const onchangeprice = e => {
    setprice(e.target.value);
  };

  var today = new date();
  var date =
    today.getfullyear() + "-" + (today.getmonth() + 1) + "-" + today.getdate();
  var time =
    today.gethours() + ":" + today.getminutes() + ":" + today.getseconds();
  var datetime = date + " " + time;

  const onclick = () => {
    if (symbol !== "" && price !== "") {
      setqueries(queries => {
        return [
          ...queries,
          `${symbol}` + " " + `price:${price}` + " " + "date:" + datetime
        ];
      });
      setsymbol("");
      setprice("");
    }
  };

  useeffect(() => {
    if (symbol !== "" && symbol !== assets.find(rec => rec === symbol)) {
      setdropdown(assets.filter(rec => rec.indexof(symbol) > -1));
    } else {
      setdropdown([]);
    }
  }, [symbol]);

  return (
    <div id="dropdownarea" classname="dropdownfield">
      <div id="pricealerthistory">
        <h6>price alert history</h6>
      </div>
      <ul>
        {queries.map(query => (
          <li>{query}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="symbol"
        value={symbol}
        onchange={onchangesymbol}
      />
      <input
        type="number"
        placeholder="price"
        value={price}
        onchange={onchangeprice}
      />
      <button type="submit" onclick={onclick}>
        set
      </button>
      <ul>
        {dropdown.length !== 0
          ? dropdown.map(asset => {
              return (
                <li
                  onclick={() => {
                    setsymbol(asset);
                    setdropdown([]);
                  }}
                >
                  {asset}
                </li>
              );
            })
          : false}
      </ul>
    </div>
  );
}

if you want to hide dropdown excactly when you pressed "set".

you can add in your function onclick one string

setdropdown([])

Related Query

More Query from same tag