I built a page that requests a component that contains some props, however, this component is not showing up.
Here is my page code:
import { useEffect, useState } from "react"import { EventCard } from "../../../components/EventCard/EventCard";import { Footer } from "../../../components/footer/Footer";import { NavBar } from "../../../components/navBar/NavBar";import { database } from "../../../services/firebase"type FirebaseEventos = Record<string, { category: string, startDate: string, title: string}>type Evento = { id: string, categoria: string, dataInicio: string, titulo: string}export function BuscarEvento(){ const [eventValues, setEventValues] = useState<Evento[]>([]); useEffect(() =>{ const eventRef = database.ref(`eventos`); eventRef.once('value', evento => { //console.log(evento.val()) const databaseEventos = evento.val(); const firebaseEvent: FirebaseEventos = databaseEventos ?? {}; const parsedEventos = Object.entries(firebaseEvent).map(([key, value])=>{ return{ id: key, categoria: value.category, dataInicio: value.startDate, titulo: value.title } }) setEventValues(parsedEventos); }) }, []) return(<div><NavBar/><div className="m-5 min-vh-100"> <div className="d-flex m-3"><div className="rounded-pill p-3" style={{color: "white", backgroundColor:"#002838"}}> {eventValues.length} Evento(s)</div></div><div className="d-flex flex-column card-body "> {eventValues.length > 0 ? ( eventValues.map((eventoInfo)=>{<EventCard props={eventoInfo}/> }) ) : (<div> Não há eventos</div> )}</div></div><Footer/></div> )}and here you can find my component code:
type Card = { titulo: string, categoria: string, dataInicio: string}export function EventCard(props: {props: Card}){ console.log(props.props.categoria) return(<div className="d-flex"><p>{props.props.categoria}</p></div> )}The array has data. The console.log from component page is not showing it. I did a console log in my map function on the page and it did work.