Tengo una barra de búsqueda que muestra sugerencias de búsqueda de una API usando .filter().includes(string) .
En resumen: necesito asignar dinámicamente el índice a la matriz de resultados de búsqueda, cada vez que muestra una cantidad diferente de resultados
Si alguien escribe 'b', mostrará todos los elementos que comienzan con B. Sin embargo, onClick solo agregará el primero en la parte superior. Porque lo codifiqué de esta manera. Necesito encontrar una manera de establecer un índice para cada elemento del filtro de búsqueda y luego pasarlo en lugar de [0] así [i] (i = índice que corresponde a la búsqueda deseada de la matriz) a esta función que se ejecuta al hacer clic
const handleAdd = (e) => { // onClick={handleAdd} e.preventDefault(); setCryptolist( [ ... cryptolist , { id: filteredCoins[0]['id'], // [i] current_price: filteredCoins[0]['current_price'], // [i] name: filteredCoins[0]['name'], // [i] symbol: filteredCoins[0]['symbol'], // [i] image: filteredCoins[0]['image'], // [i] price_change_percentage_24h: filteredCoins[0]['price_change_percentage_24h'], // [i] } ] ) }Como puede ver, está codificado para agregar el elemento con el índice 0 de esta matriz:
(3) [{…}, {…}, {…}] 0: {id: 'bitcoin', symbol: 'btc', name: 'Bitcoin', image: 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579', current_price: 28982, …} 1: {id: 'binancecoin', symbol: 'bnb', name: 'BNB', image: 'https://assets.coingecko.com/coins/images/825/large/bnb-icon2_2x.png?1644979850', current_price: 307.58, …} 2: {id: 'binance-usd', symbol: 'busd', name: 'Binance USD', image: 'https://assets.coingecko.com/coins/images/9576/large/BUSD.png?1568947766', current_price: 1.001, …} length: 3[[Prototype]]: Array(0)Avíseme si expliqué el problema claramente y cómo debo abordarlo.
Por último, así es como estoy filtrando las búsquedas:
const filteredCoins = coins.filter(coin => coin.name.toLowerCase().includes(search.toLowerCase()) );Agradezco mucho cualquier ayuda. 🙏
No estoy seguro si entiendo al 100% su problema, pero creo que tiene un componente como este:
const CoinList = () => { // some code.. const filteredCoins = /* ... */; const handleAdd = (e) => { /* ... */ }; return ( <div> {filteredCoins.map(coin => ( <div key={coin.id} onClick={handleAdd}>{coin.name}</div> )} <div> ); } Puede pasar el índice, que es el segundo argumento de la función pasada a map , para handleAdd como se ve aquí:
const CoinList = () => { // some code.. const filteredCoins = /* ... */; const handleAdd = (e, i) => { /* use i here */ }; return ( <div> {filteredCoins.map((coin, i) => ( <div key={coin.id} onClick={(e) => handleAdd(e, i)}>{coin.name}</div> )} <div> ); } Esto le permitirá usar el índice i en su función handleAdd como desee.