Error: undefined (reading 'map'). Using && Success to compile but no array displayed

Question

I'm a new student of next-js, I currently learning on database/calling arrays.
I have this files structure & script (in this image) trying to call arrays from /data.

The problem with this script is, it is pointing Error: Cannot read properties of undefined (reading 'map') to .map.

My question is, what is wrong with the script?

And then, there are some solution I read from the community to add && or id?.map.

So I try to use newlink && newlink.map and newlink?.map for my script. The result is, yes it fix the script to be able to compile, but there is no arrays displayed.

How to fix this error?

How to display arrays using Array<Linklist>?

Answer 1

You are exporting the newlink array in index.tsx but you aren't using it anywhere in getdata.tsx. newlink in getdata.tsx isn't the same as in index.tsx, it's a function argument and is empty since you aren't using it.

My guess is you probably need to do something like this where ShowData is actually used in order to pass newlink as an argument of ShowData:

import newlink from '../../data'

export default function SomeComponent() {
    return <ShowData newlink={newlink}></ShowData>
}