Mi componente de búsqueda devuelve una lista asignada de resultados basada en la entrada. Dependiendo del elemento de la lista en el que se haya hecho clic, quiero asignarlo a mi estado de existencias actual, pero no estoy seguro de cómo accedería a ese elemento específico.
const selectStock = ()=>{ setSearch(""); setCurrentStock(); } return ( <div className="searchContainer"> <form className="searchBar"> <input className="search" type="text" placeholder="Search Ticker Symbol" onChange={handleSearch} /> </form> <div className="searchResults"> <ul> {/* {stockNames.map((stockname) => { const { name, symbol} = stockname; return ( <li className="displaySearch" onClick={selectStock} key={symbol}> <p>{name} ({symbol})</p> </li> ); })} */} </ul> </div> </div> );}
Primero, querrá cambiar su función selectStock para aceptar el stockName en el que debe establecerse. Eso debe pasarse a su función setCurrentStock :
const selectStock = (nextStock) => { setSearch(""); setCurrentStock(nextStock); } Luego, pase una función de flecha a través de la función onClick para la fila que seleccione:
<div className="searchResults"> <ul> {stockNames.map((stockname) => { const { name, symbol } = stockname; return ( <li className="displaySearch" onClick={() => selectStock(stockname)} key={symbol}> <p>{name} ({symbol})</p> </li> ); })} </ul> </div> Lo que esto hace es esencialmente crear una nueva función para cada fila que es específica de sí misma. Cuando se hace clic en esa fila, activa su propio onClick único, que pasa su propio valor de nombre de selectStock stockname
Puede pasar el stock seleccionado a la función selectStock convirtiéndolo en una función ES6.
Vea abajo:
const selectStock = (selectedStock)=>{ setSearch(""); setCurrentStock(selectedStock); } return ( <div className="searchContainer"> <form className="searchBar"> <input className="search" type="text" placeholder="Search Ticker Symbol" onChange={handleSearch} /> </form> <div className="searchResults"> <ul> {/* {stockNames.map((stockname) => { const { name, symbol} = stockname; return ( <li className="displaySearch" onClick={()=>selectStock(stockName)} key={symbol}> <p>{name} ({symbol})</p> </li> ); })} */} </ul> </div> </div> );Puede pasar otras variables de manera similar si es necesario.