Tengo datos JSON almacenados en un archivo titulado recetas.json (es local) y estoy usando ganchos de estado y almacenando esos datos en una variable de estado titulada "recetas". Para referencia,

aquí está la estructura de datos .json local:

 [ {"id": "0001", "title": "Chicken Pot Pie", "url": "https://www.pillsbury.com/recipes/classic-chicken-pot-pie/1401d418-ac0b-4b50-ad09-c6f1243fb992", "time": { "prepTime": 25, "cookTime": 40 }, "ingredients": [ "CHICKEN " ] },

Aquí está la declaración y asignación de la variable de estado:

 const [recipes, setRecipes] = useState([]); useEffect(() => { const fetchRecipes = async () => { const response = await fetch('recipes.json'); const recipesData = await response.json(); setRecipes(recipesData); }; fetchRecipes(); }, []);

Tengo una matriz que sé que contiene una lista dinámica de ingredientes y la estoy imprimiendo al usuario en cualquier momento para mostrar lo que contiene. Es una variable titulada allIngredients.

Estoy tratando de ejecutar un ciclo for a través de los diferentes objetos json por id, por id map () los ingredientes en una matriz arrayToCheck, y luego comparar esa matriz ToCheck terminada por receta con todos los ingredientes creados por el usuario, pero estoy obteniendo un error en mi función: "El analizador esperaba encontrar un '}' para que coincida con el token '{' aquí". Sé que no está en ningún otro lugar de mi código porque no modifiqué nada más y funcionaba antes de agregar este bloque:

 const useRecipes = () => { let arrayToCheck = []; for (recipes.id; recipes.length; recipes.id++) { recipes.map((map.recipe) => { arraytoCheck = arrayToCheck.push(recipe.ingredients.toUpperCase()) if (arrayToCheck.sort() === allIngredients.sort()) { return recipe.title; } }) arrayToCheck = []; } }

Sé que esto puede parecer complicado (soy más nuevo en Stack Overflow, así que haga cualquier pregunta aclaratoria. Gracias de antemano por la ayuda.