Inserting elements in the search URL

Solution 1:

It looks like that API takes a comma separated list of ingredients.

• Search by ingredient

  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Gin
  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Vodka
  

• Filter by multi-ingredient (only available to $2+ Patreon supporters)

  www.thecocktaildb.com/api/json/v1/1/filter.php?i=Dry_Vermouth,Gin,Anis
  

Assuming you've correct access, you can specify the select element to select multiple options using the multiple attribute. This will require updating the onChange handler logic to iterate the selected options. Create an array of selected options and join them with "," for the queryString value.

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>