Dropdown list of names in ReactJS

Question

novice in react here.

I have a dropdown form with search engine in it which is working perfectly how I need. The only thing that when I write for example AR in Symbol field it shows me ARDRBTC as it should be, but I can't click on it and it's just a name. I want that I can click on this name and it will full-fill mine 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.

CODE

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 [searchSymbol, setSearchSymbol] = React.useState([]);
 const handleChangeTerm = event => {
    setSearchTerm(event.target.value);
  };
const handleChangeSymbol = event => {
    setSearchSymbol(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchSymbol(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>

        <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChangeTerm}
      /> 

       <input
        type="number"
        placeholder="Price"
      />

    {
        searchTerm.length > 0 && searchSymbol.map(item => <li>{item}</li>)
    }
      <Button variant="secondary">Set</Button>
    </div>
  );
}
export default PriceTriggerField;

Answer 1

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 [searchSymbol, setSearchSymbol] = React.useState([]);
 const handleChangeTerm = event => {
    setSearchTerm(event.target.value);
  };
const handleChangeSymbol = event => {
    setSearchSymbol(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchSymbol(results);
  }, [searchTerm]);

  const handleClick = (event) => {
    console.log('event', event.target)
    console.log('This is event', event.target.id)
  }

  return (
    <div className="App">
        <h6>Price Alert History</h6>

        <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChangeTerm}
      /> 

       <input
        type="number"
        placeholder="Price"
      />

    {
        searchTerm.length > 0 && searchSymbol.map(item => <li id={item} onClick={handleClick}>{item}</li>)
    }
      <Button variant="secondary">Set</Button>
    </div>
  );
}
export default PriceTriggerField;

Answer 2

You can add onClick on li that change input value when you press on it

{
  searchTerm.length > 0 && searchSymbol
    .map(item => <li onClick={(() => setSearchTerm(item) )}>{item}</li>)
}

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 [searchSymbol, setSearchSymbol] = React.useState([]);
 const handleChangeTerm = event => {
    setSearchTerm(event.target.value);
  };
const handleChangeSymbol = event => {
    setSearchSymbol(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchSymbol(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>

        <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChangeTerm}
      /> 

       <input
        type="number"
        placeholder="Price"
      />

    {
        searchTerm.length > 0 && searchSymbol.map(item => <li onClick={(() => setSearchTerm(item) )}>{item}</li>)
    }
      <Button variant="secondary">Set</Button>
    </div>
  );
}
export default PriceTriggerField;