I am currently writing an app that lets users check boxes, and help them decide what drinks to make with whatever ingredients they have. At the moment, I have it set up so the user can go through a list of ingredients, and check off which ones they have. Then after hitting submit, the app will go through all the ingredients of all the drinks, and if a drink recipe contains all the ingredients the user has, it will return that drink.

The problem is, I want the user to be able to put in multiple ingredients, but not have the app only return the recipe if it has ALL of the ingredients. Example: The user puts in they have vodka, rum, and limes, I want the app to return the recipes that require (Vokda, limes), (Rum, Limes), (Rum, Vodka), (Rum, Vodka, Limes), (Rum), (Limes), (Vodka).

Here's what I have so far.

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;

I feel there's a better way to do this without looping through the entirety of the drink list, drink ingredients list, and haved ingredients list. Any help is appreciated, thank you.