En una página web para un grupo de ex alumnos, estoy tratando de administrar equipos, y en la tabla de equipos, tengo los campos: año, categoría_equipo (Fútbol, etc.) y miembros (MtoM). Estoy tratando de mostrar en la primera página una lista de categorías, pero solo una por entrada de campo. Al hacer clic en el botón de categoría, se abriría una lista de equipos filtrados por dicha categoría y se mostraría el año y los miembros del equipo. Entonces, mi ejemplo a continuación sería solo fútbol, cheearleading, ajedrez. ¿Cómo agrupar por categoría o cualquier método potencialmente mejor?

 import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { getTeams } from "../../../api/apiCalls"; const Teams = () => { const [teams, setTeams] = useState([]); useEffect(() => { getTeams() .then((response) => { console.log(response.data); setTeams(response.data); }) .catch((error) => { console.log(error.message); }); }, []); return ( <div className=""> <h1> Teams <hr /> </h1> {teams.map((teams, index) => ( <div className="" border="" key={teams.id}> <Link className="btn btn-outline-dark btn-warning m-1" to={`/dashboard/teams/${teams.category}/`} > {teams.category} </Link> </div> ))} </div> ); };

Salida para mi código