Estoy tratando de recorrer todos los valores únicos de un objeto anidado. Parece que algo como esto debería ser fácil, pero no puedo encontrar la manera de hacerlo.
he intentado esto
const result = [...new Set(events.flatMap(({tags}) => tags))].sort()
Y luego, cuando hago eco de { result } , finalmente obtengo la salida de valores únicos. Pero quiero usar estos valores en la aplicación. De alguna manera envuelva cada valor en un <button> o algo así.
A continuación se muestra mi objeto de prueba. Cada elemento tiene una serie de etiquetas, y quiero poder enumerar dinámicamente todas las etiquetas únicas.
Estaría muy agradecido por cualquier ayuda aquí.
Gracias por adelantado.
const events = [ { id: 1, name: "Event 1", tags: ["tag 1", "tag 2", "tag 3"] }, { id: 2, name: "Event 2", tags: ["tag 1", "tag 3"] }, { id: 3, name: "Event 3", tags: ["tag 1", "tag 3", "tag 2"] }, { id: 4, name: "Event 4", tags: ["tag 1", "tag 5", "tag 3"] }, { id: 5, name: "Event 5", tags: ["tag 3"] }, { id: 6, name: "Event 6", tags: ["tag 2", "tag 3"] } ]export default function App() { const events = [ { id: 1, name: "Event 1", tags: ["tag 1", "tag 2", "tag 3"] }, { id: 2, name: "Event 2", tags: ["tag 1", "tag 3"] }, { id: 3, name: "Event 3", tags: ["tag 1", "tag 3", "tag 2"] }, { id: 4, name: "Event 4", tags: ["tag 1", "tag 5", "tag 3"] }, { id: 5, name: "Event 5", tags: ["tag 3"] }, { id: 6, name: "Event 6", tags: ["tag 2", "tag 3"] } ]; const result = [...new Set(events.flatMap(({tags}) => tags))].sort(); return ( <div> { result.map((tag,i) => <h1 key={i}>{tag}</h1>) } </div> ); }