React map() showing undefined

Question

I have a project where I used redux-saga to make an API call with axios and return the data to the store, which then I mapStateToProps using redux and now I want to map() it and show it on my DOM, but I'm getting "undefined".

Two things keep happening:

1. either the data doesn't get called in time and the render happens to fast so it says its undefined.
2. i get map() is not a function or for {blog.id} -- id is undefined.

When I console.log(blogs) i see my array of blogs so I'm not sure what I'm doing wrong. Is it because blogs is an array and so I need to do some kind of for loop to go through the each item and then map it?

Here is my main chunk of code and the console log

import React, {Component} from 'react';
import {connect} from 'react-redux'
import {loadBlogs} from '../../store/actions/blogActions'

class Bloglist extends Component {
    componentDidMount() {
        this.props.loadBlogs();
    }

    render() {
        const {blogs} = this.props
        console.log(blogs)
        return (
            <div>
                <h1>{blogs.map(blog => (
                    <span>{blog.id}</span>
                ))}</h1>
            </div>
        )
    }
}

const mapStateToProps = blogs => ({
    blogs
})
const mapDispatchToProps = dispatch => ({
    loadBlogs: () => dispatch(loadBlogs()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Bloglist)

here is a console log example and an error:

Uncaught TypeError: blogs.map is not a function

this is when I just comment out the map() lines and just return a "hello", this console.log is showing me that the data is coming back

Bloglist.js:14 (3) [{…}, {…}, {…}]

Please let me know if you want any more samples or info. It's really important to get this done so any help would be appreciated! Thanks!

Answer 1

There can be 2 issues.

1. Please cross check the type of blogs, it should be array as map method works only on array.

2. You have to check for array's length before mapping it. As map method doesn't works on empty array.
   Try this code --

    <div>
        <h1>{blogs && blogs.length > 0 ? blogs.map(blog => (
            <span>{blog.id}</span>
        )) : null}</h1>
    </div>
   

Answer 2

At the beginning, your blogs is not an Array. You should to update your reducer initialState, set blocks to be an empty array as default, just like

in reducer.js

const initialState = {
  blogs: [],
};

export default (state = initialState, action) => {
  switch(action) {
    case....

    default:
      return { ...state };
  } 
}

Or, you also should check the blogs before rendering.

Array.isArray(blogs) && blogs.map(item => (
  <div>
    {// item details goes here}
  </div>
))

Answer 3

use ? to handle this error. mostly probably the error is coming from the saga. you have to provide the code better suggest a solution.

 <div>
                <h1>{blogs?.map(blog => (
                    <span>{blog.id}</span>
                ))}</h1>
            </div>