OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Joke.map is not a function in an react

  • Thread starter Thread starter OMKAR MUNDHE
  • Start date Start date
O

OMKAR MUNDHE

Guest
export default App

In this code it is showing error that joke.map is not a function .Pls help me find the solution

I checked the api endpoints and also the function

Code:
         import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios'

function App() {
  const [Joke,setJokes]=useState([])
  
  
  useEffect(()=>{
    
    axios.get(' /api/jokes')
          .then((response)=>{
            console.log(response)
              setJokes(response.data);
           
          })
          .catch((error=>{
            console.log(error)
          }))
  })

  return (
    <>
      <h1>Omkar Mundhe</h1>
      <p>JOKES:{Joke.length}</p>
      {
        Joke.map((joke,index)=>{
          <div key={joke.id}>
            <h3>{joke.setup}</h3>
            <p>{joke.punchline}</p>
          </div>
        })
      }
    </>
  )
}

And In console I am not getting any response but on checking in postman i am getting the below html code

Code:
<!doctype html>
<html lang="en">

<head>
    <script type="module">
        import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
    </script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx?t=1719029620018"></script>
</body>

</html>

the console log

<p>export default App</p>
<p>In this code it is showing error that joke.map is not a function .Pls help me find the solution</p>
<p>I checked the api endpoints and also the function</p>
<pre><code> import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios'

function App() {
const [Joke,setJokes]=useState([])


useEffect(()=>{

axios.get(' /api/jokes')
.then((response)=>{
console.log(response)
setJokes(response.data);

})
.catch((error=>{
console.log(error)
}))
})

return (
<>
<h1>Omkar Mundhe</h1>
<p>JOKES:{Joke.length}</p>
{
Joke.map((joke,index)=>{
<div key={joke.id}>
<h3>{joke.setup}</h3>
<p>{joke.punchline}</p>
</div>
})
}
</>
)
}
</code></pre>
<p>And In console I am not getting any response but on checking in postman i am getting the below html code</p>
<pre><code><!doctype html>
<html lang="en">

<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

<script type="module" src="/@vite/client"></script>

<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx?t=1719029620018"></script>
</body>

</html>
</code></pre>
<p><a href="https://i.sstatic.net/rUGbCzwk.png" rel="nofollow noreferrer">the console log</a></p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top