Actualmente estoy intentando hacer una aplicación para beber, donde el usuario selecciona los ingredientes que tiene, la aplicación ejecutará la lista de bebidas que tiene, la combinará y devolverá las identificaciones de las bebidas. Actualmente, lo tengo, por lo que coincide con las matrices si las casillas de verificación seleccionadas coinciden con una matriz.

 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) }

Entonces, cuando un usuario verifica "ron", "cerveza de jengibre" y "jugo de lima", estos se colocan en la matriz havedIngredients, y luego recorre y saca la matriz que coincide, en este caso, ['ron', 'jengibre cerveza', 'jugo de lima'] o más conocido como Dark And Stormy. El problema viene cuando no estoy seguro de cómo mencionar eso. En este momento, SOLO muestra la variedad de ingredientes de las bebidas combinadas, pero no el nombre de las bebidas (que sería

 totalDrinks[p].name

). Esto me ha estado estresando y estoy seguro de que hay una forma muy sencilla de hacerlo, pero no estoy seguro de cuál es.

Intenté hacer una nueva matriz que incluya todos los ingredientes y la identificación, pero por alguna razón la matriz se vuelve extraña, agrega el número de identificación dos veces, lo agrega a la matriz en la que no quiero que esté, etc. No estoy seguro de cómo, ya que todavía soy un junior.

Cualquier ayuda en esto sería muy apreciada. Gracias.