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.

CodePudding user response：

Try removing the {} from here:

eventValues.map((eventoInfo)=> 
    <EventCard props={eventoInfo}/>
)

Either that or {return <EventCard props={eventoInfo}/>}