Searching engine from array of words in React

Question

I have array of names which I want to use in my search engine. I don't want to see the list immediately when I click on my DropDown but I wish to see the first results after I enter first letters.

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

CODE HERE

import React, { useState } 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 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("");
    }
  }

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

Goal: I wan't to create a search query for the names in first input field.

Example: I write AR I see that ARDRBTC appears I wanna click it (or enter press) and fullname(ARDRBTC) appears in text input field, or I write ET in input field and I receive ETHBTC and ETCBTC in result, which I can click to fullfill the input field.

Since there will be more that 100 of this assets I really wish to create a search engine by names.

Something like on this screenshot

EDIT1

After @alexAV-dev answer I have that after I click on ADABTC and click Set button. ADABTC at the bottom remains, how I can make it disappear after clicking it? Screenshot for example

Answer 1

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([])