Errors in Mern Stack suddenly

HELLO everyone,

here in this mern stack, i am facing an error “TypeError: Map is not a function”.

after adding the title and description it redirects to home page which it is supposed show the post, but this error is coming that TypeError: map is not a function in ItemForm.js in client folder. But after reloading the page, the error cannot be seen. it’s strange. and also in Api folder in express, i made posts as descending, but it is not working. Please help me solve the issue.

The github repo.

Is it just me, or is the client folder in your github empty?

1 Like

not it is ok… i had mistaken … it is fixed. now see

I didn’t look at your code. But this error happens whenever you are trying to run map method on a variable that’s not an array. Try debugging your variable by using console logs before map function and see where your data yields unexpected results.

Trying to follow your code, do you have this as a glitch or something? A possible place to look might be, when you this.props.getPosts(), do you actually assign the return to this.props?

i cannot understand what u saying. can u be little bit easier ?

You’re mapping state to props but do you ever map Dispatch to props? Search this page for mapDispatchToProps -

i have done the quite same thing in another project. the only dissimilar that it was only one input filed, now i am making this with two input fields. i had made without mapdispatch which worked fine

and the posts are showing if the page is reloaded. but after adding the post this goes to post’s page which does not reload. then only the problem is showing, but by reloading page does not have this.

He is using the shorthand by passing it directly into connect()

@iiio2 please provide some running code, e.g. on netlify.

after adding the post, the page redirects to Home as it is made. then this error is coming. Now if i reload the page, the error goes out.

It is because you are trying to render posts before posts is even available as an array, add the below right before your return() in render

  render() {
    const { posts } =; 
    if(!posts.length) return null;
    return (
      <div className="container">
         // include same code you had here

render() is a function that gets executed in each and every component update in react, if the array is not available then you can not execute the map function on it

1 Like

fantastic. u r right Dereje1 . Thanks so much. :blush::blush:

Dereje1 , one problem stills in. I made the posts will be shown as descending order, the last post will be shown firstly Which I made in router/api/posts.js by sorting date:-1 . but the the posts are not descending , rather it is ascending.

I don’t see a date field in your mongoose schema, what field in the document is {date:-1} referring to ? I also don’t see any dates being attached to the post method on the /add route so I’m not sure exactly what you are trying to sort.
Also, mongoose queries are not promises but thenables, it is best to use exec() after the query to change them into real JS promises. All the queries listed in that page are not real promises.


bro it’s fixed. i did not include date in mongoose schema. that is why the posts were not descending. i need to put a date field. thank you so much. :slight_smile:

then i need to include exec() in finding the posts
hope it is right now.

Yeah, put .exec() before .then() after you are done chaining all of your queries, some of the non-query methods of mongoose, like create, return real promises however and don’t need the exec() to be chained

1 Like

Dereje1 , i have slightly updated the repo. In the PostItem form I put react {Link} in client folder. I want to make by clicking in the title, it will go to another page where the only title and description of that particular post will be seen. I have implemented redux too there. The page goes to particular id’s link, but the title and description cannot be seen some reason. Can you say me please ?