Currently I am attempting to make a drinking app, where the user selects the ingredients they have, the app will run through the list of drinks it has, and match it up, and returns the IDs of the drinks. Currently, I have it so it matches the arrays if the selected checkboxes match an array.

 let totalDrinks = Data.drinks

let havedIngredients = props.selectedIngredients
let newDrinkList = []
let finalList =[]

function putInNewList() {
    for (let p = 0; p < totalDrinks.length; p++ ) {
        newDrinkList.push(totalDrinks[p].ingredients)
    }
}
putInNewList()

    let checkRecipes = () => {
        const possibleDrinks = newDrinkList.filter(ingres =>
            ingres.every(ingre => havedIngredients.includes(ingre))
        );
        for ( let i= 0; i < possibleDrinks.length; i++) {
            finalList.push(possibleDrinks[i])
        }
        console.log(finalList)
    }

So when a user checks of “rum”, “ginger beer” and “lime juice” those get put into the havedIngredients array, and then cycles through and pushes out the array that matches, in this case, [‘rum’, ‘ginger beer’, ‘lime juice’] or better known as a Dark And Stormy. The problem comes when I’m not sure how to bring that up. Right now it ONLY brings up the array of matched drinks’ ingredients, but not the name of the drinks (which would be

totalDrinks[p].name 

). This has been stressing me out and I’m sure there’s a very simple way to do this, but I’m not sure what it is.

I’ve attempted to make a new array that includes all the ingredients and the ID, but for some reason the array gets weird, adds in the ID number twice, adds it into the array I don’t mean for it to be in, etc. I’m not sure how as I’m still a junior.

Any help on this would be greatly appreciated. Thank you.