Estoy tratando de hacer un filtro basado en una relación de Strapi.

Mi respuesta de Strapi se ve así:

Estoy usando Next Js para la interfaz, así que asigno accesorios así:

 return { props: { projects: data.projects.data, categories: categoriesData.data.categories.data, }, }

Hago un mapa de todo el proyecto y los enumero todos como tarjetas. Luego quiero filtrarlos en función de un clic de botón. Los botones son los nombres de las categorías y también mapeo sobre esa matriz. Al hacer clic en cada botón, ejecuto una función llamada "handleProjects" y aquí es donde me encuentro con un problema.

Anteriormente hice un filtro usando SanityCMS y Next Js, sin embargo, la estructura del código de la respuesta en Sanity es mucho más clara en comparación con la de Strapi.

Este es el código que he usado en mi proyecto anterior con Sanity:

 const [filteredProducts, setFilteredProducts] = useState(products) function handleProducts(e) { let categoryType = e.target.value setFilteredProducts( products.filter((product) => product.category == categoryType) ) }

Estoy usando esta consulta donde hago un alias de la categoría como tal y es mucho más simple:

 const productQuery = `*[_type == "product"] { _id, slug, name, image, "category": category->name }`

Mi función para mi proyecto Strapi se ve así:

 function handleProjects(e) { let categoryType = e.target.value setFilteredProjects( projects.filter((project) => project.attributes.categories.data.map((i) => i.attributes.title.includes(categoryType) ) ) ) }

Tengo una matriz de objetos, pero en algún momento tengo que mapear una matriz de objetos un nivel más profundo y ver si el tipo de categoría coincide con algunos de los valores del objeto dos niveles de profundidad.

¿Alguien puede mostrarme qué estoy haciendo mal aquí?