Tengo una llamada API ( https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value} ), lo que quiero hacer con esto es encontrar múltiples elementos basados en ese e.target.value. Tengo la siguiente configuración:
import React, {useState} from 'react' import { useGlobalContext } from './helpers/context' export default function IngredientPage() { var {cocktails} = useGlobalContext() const {ingredients} = useGlobalContext() const [cocktailList, setCocktailList] = useState([]) const handleSubmit = (e) => { console.log(e.target.value) } const handleDropdownChange = async (e) => { // const ingredientURL = fetch(`www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`) // const selectedIngredientData = ingredientURL.json() // console.log(selectedIngredientData) const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`) const data = await response.json() const {drinks} = data setCocktailList(drinks) } if(cocktails.length < 1) { return <h2 className="section-title">No cocktails available</h2> } return ( <div> <div className="form-group"> <label>Select Ingredients</label> <select className="form-control" onChange={handleDropdownChange}> { ingredients.map((item) => { return <option key={item.ingredient} value={item.ingredient}>{item.ingredient}</option> }) } </select> <button onClick={handleSubmit} type="button" className="btn btn-primary"> <i className="fas fa-search"></i> </button> </div> { cocktailList.map((cocktail) => { return ( <div key={cocktail.idDrink} className="col-sm"> <div className="card" style={{width: "18rem",marginTop: "2rem"}}> <img className="card-img-top" src={cocktail.strDrinkThumb} alt="name" /> <div className="card-body"> <h5 className="card-title">{cocktail.strDrink}</h5> </div> </div> </div> ) }) } </div> ) }Quiero encontrar una manera de poder seleccionar varios elementos o tal vez cuando presione el botón, agregará los elementos en una lista e implementará otro botón para buscar. Hasta ahora solo puedo buscar en base a un elemento. ¿Alguna idea de cómo puedo hacer eso?
Parece que la API toma una lista de ingredientes separados por comas.
Buscar por ingrediente
www.thecocktaildb.com/api/json/v1/1/filter.php?i=Gin www.thecocktaildb.com/api/json/v1/1/filter.php?i=VodkaFiltrar por múltiples ingredientes (solo disponible para seguidores de Patreon de más de $ 2)
www.thecocktaildb.com/api/json/v1/1/filter.php?i=Dry_Vermouth,Gin,Anis Suponiendo que tiene acceso correcto, puede especificar el elemento de select para seleccionar múltiples opciones usando el atributo multiple . Esto requerirá actualizar la lógica del controlador onChange para iterar las opciones seleccionadas. Cree una matriz de opciones seleccionadas y únalas con "," para el valor queryString.
const handleDropdownChange = async (e) => { const { options } = e.target; const selected = []; for (const option of options) { if (option.selected) selected.push(option.value); } try { const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${selected.join(",")}`); const { drinks } = await response.json(); setCocktailList(drinks); } catch(error) { // handle any errors } }...
<select multiple className="form-control" onChange={handleDropdownChange} > {ingredients.map((item) => ( <option key={item.ingredient} value={item.ingredient}> {item.ingredient} </option> ))} </select>