CODEWITHSUNDEEP
reactjs
Jag99
Jag99

Reputation: 754

React Parsing error: Unexpected token, expected ";"

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()

enter image description here

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

Upvotes: 0

Views: 467

Answers (3)

Pranta
Pranta

Reputation: 3705

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

Upvotes: 0

Mohammad Faisal
Mohammad Faisal

Reputation: 2363

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

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

Upvotes: 1

Sarun UK
Sarun UK

Reputation: 6766

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

Upvotes: 2

Related Questions