Soy nuevo en reaccionar y tengo problemas para intentar acceder a los datos dentro del objeto anidado. Estoy tratando de crear una aplicación donde la condición verifique la fecha de hoy con la fecha de la lista y, si la condición es verdadera, devuelve la lista.
La lista se ve así:
const data = [{ id: 1, name : 'Ashley', birthday : { year : 1998, month: 5, date : 22, }, img : 'img' }, { id: 2, name : 'Bill', birthday : { year : 1993, month: 2, date : 12, }, img : 'img' }, ];He hecho un objeto de fecha con el que se hará la comparación.
const today = new Date(); const year = today.getFullYear(); const month = today.getMonth()+1; const date = today.getDate();En la lista, el cumpleaños contiene otros tres valores y no puedo acceder a ellos usando el método de 'filtro'.
El resto del código está a continuación:
function App() { const [people, setPeople] = useState(data) return ( <section className = 'container'> <h1>{List.length} birthdays today</h1> <List people= {people}/> <button className="btn" onClick ={() => { setPeople([])}}>Clear All</button> </section> ) } const List = ({people}) =>{ return ( <> { data.filter((person) => { const {id, name, birthday, img} = person; const age = year-person.birthday.year; if(person.birthday.month === month && person.birthday.date === date){ return( <article className= 'person' key = {id}> <h2>{name}</h2> <p>{age} years old</p> <img src = {img} alt = "person"></img> </article> )} return ( [] ) })} </> ) }Perdón por la descripción larga.
La función de filter toma un predicado como parámetro que devuelve verdadero o falso, luego devuelve los elementos para los cuales la condición es verdadera.
Está devolviendo JSX/una matriz vacía en el predicado, por lo que asumo que lo que desea es map los elementos a JSX.
Tu código sería:
const List = ({people}) =>{ return ( <> {people.map((person) => { const {id, name, birthday, img} = person; const age = year - birthday.year; if(birthday.month === month && birthday.date === date){ return ( <article className='person' key={id}> <h2>{name}</h2> <p>{age} years old</p> <img src={img} alt="person"></img> </article> ) } return null; })} </> ) } He reemplazado data por people ya que es el accesorio correcto, y [] por null ya que [] no es JSX válido.
Alternativamente, puede filter y luego map de la siguiente manera:
const List = ({people}) =>{ return ( <> {people .filter((person) => person.birthday.month === month && person.birthday.date === date) .map((person) => { const {id, name, birthday, img} = person; const age = year - birthday.year; return ( <article className='person' key={id}> <h2>{name}</h2> <p>{age} years old</p> <img src={img} alt="person"></img> </article> ) })} </> ) }Debe filtrar en función de las people que pasan a List , no del objeto data .
const List = ({people}) =>{ return ( <> // instead of data { people.filter((person) => { const {id, name, birthday, img} = person; ... Eso le permitirá acceder a la id , el name , el birthday y img .
Estás pasando accesorios entre corchetes:
<List people= {people}/>se debe pasar asi:
<List people=people/> y data.filter debe reemplazarse con people.map .