I'm trying to do a simple Map Method, the data 1,2,3,4,5 can be successfully shown in console.log, but not showing on the website.
import React from 'react'
export default function secretStashScreen() {
const numbers = [1, 2, 3, 4, 5];
return (
<div>
{numbers.map((number)=>{<div>{number}</div>})
}
</div>
)
}
Warning code after compiled:
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/d
Error: Aborted because ./pages/secret-stash.js is not accepted
Update propagation: ./pages/secret-stash.js -> ./node_modules/next/dist/build/webp at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=16572
at http://localhost:3000/_next/static/chunks/webpack.js?ts=1657263030521:564:2
at Array.map (<anonymous>)
Is there anything I did wrong?
You should remove brackets in map for returning values
numbers.map((number)=><div>{number}</div>)
If you want to keep brackets, you should have return explicitly
numbers.map((number)=>{return <div>{number}</div>})
Remove your {} bracket
{numbers.map((number)=><div>{number}</div>)}