// 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>
    )
}

你好，我刚开始学习react.js。我试图用 prop 和Map渲染运动员，理论上，这是应该的，但它没有工作。
我错过了什么，还是有其他的方式来展示笑话？