Need help with mapping api data
Answered
New Guinea Freshwater Crocodile posted this in #help-forum
New Guinea Freshwater CrocodileOP
So i am trying to map some dates which are being fetched in my api into a select form but I get the error: TypeError: newsletters.map is not a function on line 54
I believe that this happens because my data is not in an array or something like that however I've been stuck on this for a while and i don't know how to fix it.
Could anyone provide me with a possible solution?
I believe that this happens because my data is not in an array or something like that however I've been stuck on this for a while and i don't know how to fix it.
Could anyone provide me with a possible solution?
133 Replies
Can you show data log?
New Guinea Freshwater CrocodileOP
Its array of object you can map it
New Guinea Freshwater CrocodileOP
but why do get this error then?
@New Guinea Freshwater Crocodile Click to see attachment
You getting single array right ?
New Guinea Freshwater CrocodileOP
i get two on a save if this is what you mean
(im not a very good programmer sorry)
@New Guinea Freshwater Crocodile i get two on a save if this is what you mean
Just refresh the page and fetch data again and check if you getting single array of object or multiple arrays
@New Guinea Freshwater Crocodile i get two on a save if this is what you mean
both data looks same thats why i asked
New Guinea Freshwater CrocodileOP
i get multiple arrays on a page refresh
Do it have it have any parent array?
something like
something like
[
[
{},
{},
{},
],
[
{},
{},
{},
]
]New Guinea Freshwater CrocodileOP
no
Just this ?
[
{},
{},
{},
],
[
{},
{},
{},
]
[
{},
{},
{},
],
[
{},
{},
{},
]
New Guinea Freshwater CrocodileOP
yes
Bro this is not valid syntax in js Arrays need to be either declared separately or combined into a single array structure
just for confirmation show whole log please
just for confirmation show whole log please
New Guinea Freshwater CrocodileOP
this is the console.log form my api doc
it returns two
This log is of client side page right not of server then please turn of strictmode from next.config.js
New Guinea Freshwater CrocodileOP
what is strictmode?
And also remove console.log from every where and have single console.log in that useEffect so we can verify what you getting there
@Shubham Tarpara Need to make this line false
This is just for development so basically it runs all code 2 times to verfify if anything is breaking or not
New Guinea Freshwater CrocodileOP
did this
Now what you getting in response?
New Guinea Freshwater CrocodileOP
i removed the console.log in my api doc
i still have one in my index page but now i am not getting data like before
Yeah just have it in cline side page in useEffect or u can console log that state outside too
New Guinea Freshwater CrocodileOP
nothing really
on my page the same error
console.log(newsletters, "+++++++")
Add this
before handleSelectChange function or anywhere
before handleSelectChange function or anywhere
New Guinea Freshwater CrocodileOP
newsletters returns an empty array
I'm bit in hurry once i reached home ill see this again
New Guinea Freshwater CrocodileOP
logging after the setnewsletters(data) returns nothing
@Shubham Tarpara I'm bit in hurry once i reached home ill see this again
New Guinea Freshwater CrocodileOP
sure, thank you!
Just check browser's console if anything is getting printed there
New Guinea Freshwater CrocodileOP
again empty array
so my data is not properly being imported in my client side file?
Yeah if you getting data in server then it is
In server just do const data = don't destructor it and return that data in place of message
New Guinea Freshwater CrocodileOP
alright so like this is better?
okay i think the data is going to my client side now correctly
the console.log(data) returns the data but after the setNewsletters(data) it becomes an empty array for some reason
@New Guinea Freshwater Crocodile what you logging in 25 line
@New Guinea Freshwater Crocodile the console.log(data) returns the data but after the setNewsletters(data) it becomes an empty array for some reason
Saint Hubert Jura Hound
this is expected behavior
react state doesnt update until the next render
it wont be empty again!
once fetched and setState then why it would be empty
If got error then and then it will be empty as per this code
Saint Hubert Jura Hound
react's setState is asynchronous. it adds the state update to a queue and only changes it on the next render for performance reasons
Yeah i know that
Saint Hubert Jura Hound
he's logging newsLetters right after setting it
But he/she not resting state again so it wont be empty again
New Guinea Freshwater CrocodileOP
so what should i do in order not to get this error?
And please console log it outside useEffect
@Shubham Tarpara And please console log it outside useEffect
New Guinea Freshwater CrocodileOP
okay
@Shubham Tarpara But he/she not resting state again so it wont be empty again
Saint Hubert Jura Hound
yes, it shouldnt be empty
Now just do newsletters.displayData.map in place of newSletters.map @New Guinea Freshwater Crocodile
New Guinea Freshwater CrocodileOP
this is what i get then
or am i still doing something wrong?
@Saint Hubert Jura Hound yes, it shouldnt be empty
this is typeScript error its fine just add ? before .displayData
newsletters?.displayData.map
New Guinea Freshwater CrocodileOP
no still the same problem
Show me error ?
New Guinea Freshwater CrocodileOP
Thats fine just check if code is working or not
Means that map is not function gone or not
New Guinea Freshwater CrocodileOP
Saint Hubert Jura Hound
your type definition is not correct. could u show the full script
or the important bits at least
@Saint Hubert Jura Hound your type definition is not correct. could u show the full script
New Guinea Freshwater CrocodileOP
here is the full code of the page
But bro we can leave type for now i just dont understand why its giving undefind in newsLetter
Can you check if all spell is correct
New Guinea Freshwater CrocodileOP
mhm
Can you console.log(newsletters.displayData)
just outside useEffect
New Guinea Freshwater CrocodileOP
@Shubham Tarpara just outside useEffect
New Guinea Freshwater CrocodileOP
yep
@New Guinea Freshwater Crocodile Click to see attachment
Dont worry about type script error its just type error it wont create problem in running code
New Guinea Freshwater CrocodileOP
undefined
Saint Hubert Jura Hound
yeah i'd fix the type first. the errors getting thrown are just causing confusion, ur state type is an array of Newsletters. but the data ur setting in setNewsletters is an object containing an array
console.log(newsLetters) is showing data?
@Shubham Tarpara console.log(newsLetters) is showing data?
New Guinea Freshwater CrocodileOP
empty array
@Saint Hubert Jura Hound yeah i'd fix the type first. the errors getting thrown are just causing confusion, ur state type is an array of Newsletters. but the data ur setting in setNewsletters is an object containing an array
New Guinea Freshwater CrocodileOP
hmm i am too unskilled to understand this
@New Guinea Freshwater Crocodile Click to see attachment
Then from which line and which file this log got printed?
@Shubham Tarpara Yeah but it dont create probem for running code right!
Saint Hubert Jura Hound
why are u using typescript if not to at least help with debugging
@New Guinea Freshwater Crocodile hmm i am too unskilled to understand this
Saint Hubert Jura Hound
i'd try to set the newsletters to setNewsletters(data.displayData)
@Saint Hubert Jura Hound why are u using typescript if not to at least help with debugging
I dont use and right now i dont even care about type as main code is not working
@Saint Hubert Jura Hound i'd try to set the newsletters to setNewsletters(data.displayData)
New Guinea Freshwater CrocodileOP
that did it!
@Saint Hubert Jura Hound i'd try to set the newsletters to setNewsletters(data.displayData)
Both is same same bro you can use that or use . notation to access it
@Shubham Tarpara I dont use and right now i dont even care about type as main code is not working
Saint Hubert Jura Hound
i can tell
New Guinea Freshwater CrocodileOP
wow!
New Guinea Freshwater CrocodileOP
no more error at least hahah
@New Guinea Freshwater Crocodile that did it!
Yeah but how both are same then how
I dont understand @Saint Hubert Jura Hound
New Guinea Freshwater CrocodileOP
guys thank you both so much for your time
@New Guinea Freshwater Crocodile guys thank you both so much for your time
{newsletters?.displayData.map((newsletter)
Did you changed this line or same as it is
Did you changed this line or same as it is
@Shubham Tarpara I dont understand <@373812257601093642>
Saint Hubert Jura Hound
typescript will throw compile time errors
@Shubham Tarpara {newsletters?.displayData.map((newsletter)
Did you changed this line or same as it is
New Guinea Freshwater CrocodileOP
i changed it back to just newsletters.map
Saint Hubert Jura Hound
if the type is incorrect typescript will throw an error. thats one of the benefits of using typescript
so that bugs like that dont pass builds
@Shubham Tarpara newsletters?.displayData.map
Yeah bro but my if not typeScript then this is also correct right ? @Saint Hubert Jura Hound
Saint Hubert Jura Hound
i think so yes
yeah
I used typeScript too little to understand all this still i ll give it try
BUt its just throw error it wont create problem in compiling
Saint Hubert Jura Hound
u should its rlly helpful. it can be confusing at the start, i only started recently using it myself, converted my whole nextjs project to typescript. but once u get the hang of it it'll help catch and prevent bugs
My english is weak sorry for that
Saint Hubert Jura Hound
also the type safety and intellisense are very useful
@New Guinea Freshwater Crocodile guys thank you both so much for your time
Saint Hubert Jura Hound
anyways no worries and good luck bro, feel free to mark the post as solved
Original message was deleted
Saint Hubert Jura Hound
^
Answer
@Saint Hubert Jura Hound u should its rlly helpful. it can be confusing at the start, i only started recently using it myself, converted my whole nextjs project to typescript. but once u get the hang of it it'll help catch and prevent bugs
Yeah one of exitsing project has that typeScipt with gatsby i had to just create some pages so i didnt cared much about types xD
@Shubham Tarpara Yeah one of exitsing project has that typeScipt with gatsby i had to just create some pages so i didnt cared much about types xD
Saint Hubert Jura Hound
yeah thats what i did the first time using typescript, also on a gatsby project funnily enough lol
i just had :unknown's and !'s everywhere
didnt know what i was doing
Same haha! but thank you and you too good luck
New Guinea Freshwater CrocodileOP
alright, again thanks so much