Estoy tratando de hacer una "planificación semanal" en reactJS, soy un principiante, lo siento si ves algún error.
Tengo una serie de eventos, como este:
var events = [ { date : moment("14-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"), name : "EVENT MONDAY 13 2022" }, { date : moment("16-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"), name : "EVENT WEDNESDAY 2022" }];Creé una condición para ver si la fecha del evento es la misma que la fecha de la semana y puse esto en una tabla como esta:
<table className="table table-bordered text-center"> <thead> <tr className="bg-light-gray"> {week.map((wk) => (<th class="text-uppercase">{wk}</th>))} </tr> </thead> <tbody> <tr> {week.map((wk) => ( events.map((ev) =>( wk === ev.date ? <td>{ev.name}</td> : <td></td> )) ))} </tr> </tbody> </table>Pero no funciona porque crea demasiados elementos "td", y no sé cómo poner el nombre del evento debajo de la fecha correcta...
¿Puede alguien ayudarme allí?
Considere cómo se ve una tabla cuando necesita renderizarla. Primero, debe "hacer filas" y luego, dentro de cada fila, debe "hacer columnas". Como solo estás haciendo una semana, prácticamente te da la primera tarea gratis, solo hay una fila.
En cuanto a la segunda parte, la representación de columnas, debe preparar mejor sus datos. Organice los eventos por el día en que se llevarán a cabo. Tomaré esto como una tarea simple con eventos solo en una fecha específica como la publicaste, si quisieras que los eventos abarquen varios días, el código obviamente sería diferente.
Primero, imaginando cuál es el resultado deseado:
var events = { [date]: [eventName, eventName, eventName], [date]: [eventName], [date]: [], } Esto muestra una estructura en la que un día puede ser héroe cero, ocurriendo uno o más eventos. También es posible usar undefined en lugar de [] para el caso "cero". Esto le permite renderizar fácilmente:
{week.map((wk) => ( <td key={wk}> {events[wk] ? events[wk].join(', ') : null} </td> )}Ahora, lo que esto hace es que cuando se desgarra un día de la semana, imprime una lista de eventos en esa celda, si es que hay alguno. Esto está simplificado con seguridad, pero muestra qué hacer.
Finalmente, debe modificar sus datos para que coincidan con los datos finales:
var events = [ { date: moment("14-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"), name: "EVENT MONDAY 13 2022" }, { date: moment("16-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"), name: "EVENT WEDNESDAY 2022" } ]; var eventsMapped = {} var event for (event of events) { if (!eventsMapped[event.date]) { eventsMapped[event.date] = [] } eventsMapped[event.date].push(event.name) }Simplemente puede hacer esto dentro de la función de renderizado. Para matrices pequeñas, debería estar bien. Si obtiene muchos eventos, puede considerar optimizarlos más adelante.
Luego puede usar eventsMapped para representar donde estaban events anteriores.