React render props using map

January 2, 2023

// Joke.js

import React  from 'react'
export default function Joke(props) {
    return (
        <div>
            {props.setup && <h3>Setup: {props.setup}</h3>}
            <p>Punchline: {props.punchline}</p>
            <hr />
        </div>
    )
}

// Jokes.js

import React  from 'react'
export default [
    {
        setup: "I got my daughter a fridge for her birthday.",
        punchline: "I can't wait to see her face light up when she opens it."
    },
    {
        setup: "How did the hacker escape the police?",
        punchline: "He just ransomware!"
    }
]

// App.js

import React from "react"
import Joke from "./Joke"
import jokesData from './Jokes'
export default function App() {
    const jokeElements = jokesData.map(joke => {
        return <Joke setup={joke.setup} punchline={joke.punchline} />
    })
    return (
        <div>
            {jokeElements}
        </div>
    )
}

Hello, i just started learning react.js. i was trying to render the jocks using props and map in theory this was suppose, to work its not. What am i missing or is there another way of displaying the jokes.