REACT - MAPPING

    // MAPPING <
    //App.js
    import React from 'react';
    import Joke from './components/Joke';
    import jokesData from './components/jokesData';


    function App() {
    //create an array of componentes
    const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question}  punchLine={joke.punchLine} /> )

    // const nums = [1,2,3,4,5,6,7]
    // const doubled = nums.map(function(num){
    //   return num * 2
    // })
    return (
        <div >
        {jokeComponents}
        </div>
    )
    }

    export default App;


    
    //jokesData.js

    const jokesData = [
        {
        id: 1,
        question:"What's the best thing about Switzerland? ",
        punchLine:"I don't kwnow but the flag is a big plus"
        },
        {
        id: 2,
        punchLine:"He'll stop at nothing to avoid them!"
        },
        {
        id: 3,
        question:"Hear bout the new restaurant called Karma?",
        punchLine:"There's no menu: You get what you deserve"
        },
        {
        id: 4,
        question:"Did you hear about the claustrophobic astronaut?",
        punchLine:"He just needed a little space"
        }

    ]

    export default jokesData

    //Joke.js
    //EVERY COMPONENT NEEDS TO IMPORT REACT
    import React from 'react'

    function Joke(props){
        return (
            <div>
                <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>
                <h3 color={{color: props.question ? "#888888" : "#2FAjN2"}}>PunchLine: {props.punchLine}</h3>
            </div>
        )
    }

    export default Joke

    

    // MAPPING < 24 class based components