Map function 不渲染元素

Question

Im starting with Next.js and I'm trying to render some data from CMS. I can access data inside map function, but I cant render any element inside it. Here is my index.tsx

type OpenJobsProps = {
    slug: string,
    image: string
}

const JoinUs = ({ jobs }: InferGetStaticPropsType<typeof getStaticProps>) => {
    return(
        <Layout>
            <Welcome>
                <h1>Join us</h1>
                <p>It’s designed to appeal to emotions, in order to<br/> achieve rational goals. The concept doesn’t make<br /> logical sense at first.</p>
            </Welcome>
            <OpenJobs>
                {jobs.data.map((item: any, index: number) => {
                    {console.log(item)}
                    <>
                        <OpenJobItem slug={item.slug} source={item.image}/> 
                        <p>{item.slug}</p>
                    </>
                })}
            </OpenJobs>
            <Culture/>
        </Layout>
    )
}

export const getStaticProps: GetStaticProps = async (ctx) => {
    const jobs: OpenJobsProps[] = (await getAllOpenJobs() || [])

    return {
      props: {
        jobs,
      }
    }
  }

export default JoinUs;

console log returns But map function doesnt return any element or component.

Answer 1

add return

{jobs.data.map((item: any, index: number) => {
    console.log(item);
    return (<>
        <OpenJobItem slug={item.slug} source={item.image}/> 
        <p>{item.slug}</p>
    </>);
})}

or just:

{
    jobs.data.map((item: any, index: number) => (<>
        <OpenJobItem slug={item.slug} source={item.image} />
        <p>{item.slug}</p>
    </>))
}