Tengo las siguientes dos matrices:
const dates = [ "January 1st, 2022", "January 2nd, 2022", More dates...] const events = [ { id: 1, date: "January 10th, 2022", title: "Have a meeting", } More events... ]Lo que me gustaría hacer es mapear a través de la matriz de fechas, mostrar todas las fechas y también mapear a través de la matriz de eventos y mostrar event.title cuando event.date coincida con la fecha correspondiente en la matriz de fechas. ¿Cómo puedo mapear los eventos? matriz con la matriz de fechas y cuando las fechas coinciden, se genera el evento.título?
Actualmente tengo esto:
{dates.map((date, i) => ( <li key={i} > {date} //Here I would also like to display the {event.title} when the dates match. </li> ))}Si todas sus fechas son cadenas y coinciden con las cadenas en la matriz de dates , entonces podría estructurar sus eventos como un objeto donde las claves son las fechas. (Esto supone que no hay eventos superpuestos).
El beneficio de este método es que solo tiene dos bucles, lo que hace que el código sea muy eficaz.
const structuredEvents = events.reduce((acc, cur => { acc[cur.date] = cur; return acc; }, {}); En su bucle, seleccione el evento según la date .
{dates.map((date, i) => { const event = structuredEvents[date]; return ( <li key={i} > {date} {event?.title} </li> ); })}(con operador de encadenamiento opcional (?.))
{dates.map((date, i) => ( <li key={i} > {events.find(e => e.date == date)?.title} </li> ))}import logo from './logo.svg'; import './App.css'; const dates = [ "January 1st, 2022", "January 2nd, 2022", ] const events = [ { id: 1, date: "January 1st, 2022", title: "Have a meeting", }, { id: 1, date: "January 2nd, 2022", title: "second meeting", }, { id: 1, date: "January 3rd, 2022", title: "Have a meeting", } ] function App() { return ( <div className="App"> {dates.map((date, i) => ( <li key={i} > {events.map((data,i)=> { console.log(data,date,"data...") return ( <div> {data.date == date ? <div>Here I would also like to display the {data.title} when the dates match.</div> :null} </div> )})} </li> ))} </div> ); } export default App;