Actualmente estoy escribiendo una aplicación que permite a los usuarios marcar casillas y ayudarlos a decidir qué bebidas preparar con los ingredientes que tengan. Por el momento, lo tengo configurado para que el usuario pueda revisar una lista de ingredientes y marcar cuáles tiene. Luego, después de presionar enviar, la aplicación revisará todos los ingredientes de todas las bebidas, y si una receta de bebida contiene todos los ingredientes que tiene el usuario, devolverá esa bebida.

El problema es que quiero que el usuario pueda poner varios ingredientes, pero que la aplicación no solo devuelva la receta si tiene TODOS los ingredientes. Ejemplo: el usuario ingresa que tienen vodka, ron y limas, quiero que la aplicación devuelva las recetas que requieren (Vokda, limas), (Ron, Limas), (Ron, Vodka), (Ron, Vodka, Limas) , (ron), (limas), (vodka).

Esto es lo que tengo hasta ahora.

 import React from 'react'; import Data from '../Data' function HavedRecipeCards(props) { let totalDrinks = Data.drinks let havedIngredients = props.selectedIngredients // havedIngredients is represented with a normal array // Ex: ['vermouth', 'limes'] let checkRecipes = () => { if (havedIngredients.length > 0) { for (let i = 0; i < totalDrinks.length; i++ ) { let drinkIng = totalDrinks[i].ingredients for (let p = 0; p <= havedIngredients.length; p++) { for (let o = 0; o < drinkIng.length; o ++) { if (havedIngredients[p] == drinkIng[o]) { } } } } } } return ( <div> <input type="submit" value="Submit" onClick={checkRecipes}/> </div> ) } export default HavedRecipeCards;

Siento que hay una mejor manera de hacer esto sin recorrer la totalidad de la lista de bebidas, la lista de ingredientes de bebidas y la lista de ingredientes consumidos. Cualquier ayuda se agradece, gracias.