Actualmente estoy trabajando en un componente de reacción que filtra algunos datos y el uso principal del componente es que, a medida que el usuario escribe, filtra los datos y genera los datos para que el usuario elija. También se puede hacer clic en la salida de datos. En este momento, mis opciones se enumeran así:

Foto 1

Sin embargo, me gustaría que esto se presentara de una manera más desplegable, en lugar de simplemente enumerarlos. Por ejemplo, como la página de resultados de búsqueda de Google:

foto 2

Aquí está mi parte del código que representa las opciones. La parte de la etiqueta es lo que presenta mis opciones, pero sería bueno que estuviera debajo o adjunta a la barra de búsqueda. Cualquier consejo sería útil. ¡Gracias una tonelada!

 return ( <Fragment> <input type="text" placeholder="Enter Brewery Name" style={{ width: "40%", marginTop: "10px"}} className="search-box" onChange ={(debounce((e) => searchBreweries(e.target.value)))} /> {searchBrews && searchBrews.map((brew) => { return ( <ul> <label class="search" name="state" onClick={() => history.push({ pathname: '/BrewDetails', currentbrew: brew})}> <option value="AL">{brew.name}</option> </label> </ul> ) }) } </Fragment> );

}