Map Method not returning data on Nextjs-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

Remove your {} bracket

{numbers.map((number)=><div>{number}</div>)}