0
269
Views¿Cómo agrupar elementos bajo un elemento principal específico en React?
Tengo una API de groups que tiene un campo id y group_name . Hay otra API training que me da training_name y training_group_id . Cada entrenamiento en la API de training está vinculado a un grupo.
Presentar salida en UI - Grupo 1 - Capacitación 1 | Grupo 2 - Entrenamiento 2 | Grupo 2 - Entrenamiento 3 | Grupo 2 - Entrenamiento 4
¿Hay alguna forma en que pueda mostrar agrupando los entrenamientos que tienen un group_name de grupo común para que aparezcan bajo un group_name y no se repitan como se muestra en el resultado anterior?
Resultado esperado en UI - Grupo 1 - Capacitación 1 | Grupo 2 - Entrenamiento 2, Entrenamiento 3, Entrenamiento 4
Código -
function TileViewNew() { const { currentUserTrainings, trainingGroups } = useContext(MyContext); const renderTrainingGroupName = training => { const trainingGroupName = trainingGroups.find(group => { return group.id === training; }); return trainingGroupName.group_name; }; return ( <Grid> {currentUserTrainings.map(({ training_name, training_group }) => ( <> <Grid> <strong>{renderTrainingGroupName(training_group)}</strong> </Grid> {training_name} </> ))} </Grid> ); } export default TileViewNew;2 answers
Answer question0
Tal vez necesite construir una nueva estructura de datos
para lograr la representación que desea
Porque UI = fn (datos)
Espero que esto te ayude
import { type FC, useState, useEffect } from 'react'; const currentUserTrainings = [ { training_name: 'Training 1', training_group: 1, }, { training_name: 'Training 2', training_group: 2, }, { training_name: 'Training 3', training_group: 2, }, { training_name: 'Training 4', training_group: 2, }, ]; const trainingGroups = [ { group_name: 'Group 1', group_id: 1, }, { group_name: 'Group 2', group_id: 2, }, ]; export const TileViewNew: FC = () => { const [result, setResult] = useState({}); useEffect(() => { const targetDate = currentUserTrainings.map((item) => { const group = trainingGroups.find((group) => group.group_id === item.training_group); return { ...item, group_name: group.group_name, }; }); const targetResult = {}; targetDate.forEach((item) => { targetResult[item.group_name] = targetResult[item.group_name] || []; targetResult[item.group_name].push(item); }); // console.log(targetResult); setResult(targetResult); }, []); return ( <> {Object.keys(result).map((k) => ( <div key={k}> <b>{k}</b> {result[k].map((c) => ( <span key={c.training_name}>{c.training_name}</span> ))} </div> ))} </> ); }; export default TileViewNew;0
Básicamente, puede transformar los datos que obtiene de API de esta manera
const currentUserTrainings = [{training_name: 'Training 1',training_group_id: 1,},{training_name: 'Training 2',training_group_id: 2,},{training_name: 'Training 3',training_group_id: 2,},{training_name: 'Training 4',training_group_id: 2,},]; const trainingGroups = [{group_name: 'Group 1',group_id: 1,},{group_name: 'Group 2',group_id: 2,},]; // group trainings by group id let transformedTraining = currentUserTrainings.reduce((acc,curr) => { let id = curr.training_group_id acc[id] = acc[id] || [] acc[id].push(curr) return acc }, {}) // loop over groups to show final output trainingGroups.forEach((curr)=>{ let name = curr.group_name let id = curr.group_id let trainings = transformedTraining[id]?.map(v => v.training_name).join(',') console.log(name, trainings) })