React render props using map-CodePudding

// 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.

CodePudding user response：

if you are not writing the code in scrimba and following along on your local machine (I recognized that you are following along with bob ziroll Beginner's Tutorial for React JavaScript Library)

I made some changes to the Jokes.js you don't need to import react in Jokes.js as you are not going to use it.

Also exporting the array full of objects on your local machine won't work the same as it works on scrimba you need to define a variable with the arr then export it

//Jokes.js

let arr =  [
    {
        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!"
    }
]
 
export default arr;

CodePudding user response：

You are facing export errors, to properly export the array you have to change the jokesData file,

let jokesData=[
    {
        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!"
    }
]

export default jokesData;

And in the App.js export the array code file like this

import jokesData from "the_name_of_file.js"

If other file imports are correct then this should work.

CodePudding user response：

Your code is fine I have just copied your code to stackblitz.com and it's working fine. You can find the sample Here