React Parsing error: Unexpected token, expected ";"

Question

I'm reading an array from a file called jokesData.js as below in the App.js file. If I add the return ( {jokeComponents} ) within render() {}, i get the error below. Do not we require render()

const jokesData = [
    {
        id: 1,
        punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
    },
    {
        id: 2,
        question: "What's the best thing about Switzerland?",
        punchLine: "I don't know, but the flag is a big plus!"
    },
    {
        id: 3,
        question: "Did you hear about the mathematician who's afraid of negative numbers?",
        punchLine: "He'll stop at nothing to avoid them!"
    }
]

export default jokesData

import React from 'react';
import './App.css';
import Joke from './components/Joke.js';
import jokesData from './data/jokesData.js'

function App() {

  const jokeComponents = jokesData.map((joke) => <Joke key={joke.id} question={joke.question} punchLine = {joke.punchLine} />)

    
    render() {
      return (
        <div>
          {jokeComponents}
        </div>
      )
    }

}

export default App

Answer 1

render() is required for class components.

Try below code.

import React from 'react';
import './App.css';
import Joke from './components/Joke.js';
import jokesData from './data/jokesData.js'

function App() {

  const jokeComponents = jokesData.map((joke) => <Joke key={joke.id} question={joke.question} punchLine = {joke.punchLine} />)

       return (
        <div>
          {jokeComponents}
        </div>
      );

}

export default App

Answer 2

just return your jsx . You do not need any render function in functional components

 return (
        <div>
          {jokeComponents}
        </div>
      );

Answer 3

render function is only applicable to class components. You do not need to write it in the functional components.

 import React from 'react'; import './App.css'; import Joke from './components/Joke.js'; import jokesData from './data/jokesData.js' function App() { const jokeComponents = jokesData.map((joke) => <Joke key={joke.id} question={joke.question} punchLine = {joke.punchLine} />) return ( <div> {jokeComponents} </div> ) } export default App