TypeError: .map is not a function

While developing my React app to use nested routing I cam across this error. Here is the code starting with the module that contains ReactDOM.Render.

import React, { Component } from 'react'
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

// now-ui import
import LoginPage from './examples/LoginPage'

// user developed views
import SingleParameterRouteView from './SingleParameterRouteView'
import DoubleParameterRouteView from './DoubleParameterRouteView'

// third party packages
import axios from 'axios'
import { Get } from 'react-axios'


// backend constants
import { localhost } from 'backendConstants'





class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false,
            authtoken: null,
            data: [],
            blog: {},
            path: null,
        };
    }

    getData = () => {
        axios.get(`${localhost}/blog`)
            .then(res => {
                this.setState({ data: res.data })
            })
    }

    render () {
        return (
            <BrowserRouter>
                <Switch>
                    <Route
                        path='/:dir'
                        render={props => <SingleParameterRouteView {...props} />}
                    />
                </Switch>
            </BrowserRouter>
        )
    }
}

export default App;

SingleParameterRouteView

import React, { useState, useEffect } from 'react'
import { localhost } from '../backendConstants'

// react-axios
import { Get, Request } from 'react-axios'

// react-router-dom
import {
    useParams,
    Route
} from 'react-router-dom'

// user defined views
import BlogListGroup from '../components/ContentAreas/BlogListGroup'
import HomePage from './HomePage'
import BlogPage from './BlogPage'
import Error404 from './404'
import LoginPage from './examples/LoginPage'

function SingleParameterRouteView (props) {
    // ! when using named arguments inside of
    // ! a <Route/> component this will cause
    // ! the route component to put an object [named params] inside
    // ! of the match object (inside of props), with a key of the named argument
    // ! in this case dir
    // ! and a value of the name of the current uri
    // ! this will not include the prepended forward slash.
    // ! here we destructure the match object using the variable
    // ! used in the named argument.
    const { dir } = useParams()

    // this routes object will contain the possible
    // values of the params object mentioned above
    // and will return the corresponding component
    const routes = {
        blog: <BlogListGroup />,
        home: <HomePage />,
        404: <Error404 />,
        login: <LoginPage />
    }

    return (
        // checking if routes[dir] will return true
        // if dir matches one of the keys in the
        // routes object and 404 if none is found
        routes[dir] ?
            routes[dir]
            :
            routes[404]
    )
}

export default SingleParameterRouteView

And here is the BlogListGroup module, the source of the error.

import React, { useState } from 'react'
import { ChasingDots } from 'better-react-spinkit'

// reactstrap components
import {
    Container,
    Card,
    CardBody,
    Row,
    Col,
    CardText,
    CardLink,
    CardTitle,
    CardSubtitle
} from 'reactstrap'

// now-ui components
import IndexNavbar from '../Navbars/IndexNavbar'
import LandingPageHeader from '../Headers/LandingPageHeader'
import BlogPage from '../../views/BlogPage'

// react-axios
import { Get } from 'react-axios'

// the back-end server url
import { localhost } from '../../backendConstants'

import { Route } from 'react-router'
// react-router-dom
import { useLocation } from 'react-router-dom'
// import { useRouteMatch } from 'react-router-dom'
// react-router

function BlogListGroup (props) {

    const [data, setData] = useState([])

    const location = useLocation()

    return (
        <>
            <IndexNavbar />
            <LandingPageHeader />
            <Container>
                <Row>
                    <Col
                        className='ml-auto mr-auto'
                        md='10'
                        xl='6'
                    >
                        <Get
                            url={`${localhost}${location.pathname}`}
                        >
                            {(error, response, isLoading, makeRequest, axios) => {

                                if (error) {

                                    return <div>{error.message}</div>

                                }
                                else if (isLoading) {

                                    return <ChasingDots />

                                }
                                else if (response !== null) {

                                    setData(response.data)

                                    return (

                                        response.data.map((data) =>

                                            <Card>
                                                <CardBody>
                                                    <CardTitle>{data.blog_name}</CardTitle>
                                                    <CardSubtitle>{data.blogger}</CardSubtitle>
                                                </CardBody>
                                                <img src={data.blog_picture_context} alt='context' />
                                                <CardBody>
                                                    <CardText>{data.blog_post}</CardText>
                                                    <CardLink href={`/blog/${data.id}`}>Detail Page</CardLink>
                                                </CardBody>
                                            </Card>
                                        )
                                    )
                                }
                                return <div>Default Message</div>
                            }}
                        </Get>
                    </Col>
                </Row>
            </Container>
            <Route
                path='/blog/:id'
                render={props => <BlogPage {...props} />}
            />
        </>
    )
}

export default BlogListGroup

Once one of the links inside of the Card component is clicked and it renders the next page this will cause the error TypeError: .map is not a function from within the BlogListGroup module. I am totally confused as to how I am getting this error, since .map is being called on an array of JSON data that is being sent from my own Python back-end.

Inspect what the data is – log it or put a breakpoint in. You are trying to call map on something that isn’t an array and doesn’t have a map method.

Add a console.log before the setState call to validate what res.data is.

Let me post some pictures showing the error.

So here is the first page that makes a call to my backend Python app.

This page represents the BlogListGroup module. Notice the red link that says Detail Page. Once this link is clicked the error occurs. Here is the Detail Page module:

import React, { useEffect, useState } from 'react'
import { Wave } from 'better-react-spinkit'

// now-ui views
import ProfilePageHeader from '../components/Headers/ProfilePageHeader'
import IndexNavbar from '../components/Navbars/IndexNavbar'
import DarkFooter from '../components/Footers/DarkFooter'


// Reactstrap components
import {
    Container,
    Button,
    UncontrolledTooltip,
    Card,
    CardHeader,
    CardBody,
    CardImg
} from 'reactstrap'


// react-axios
import { Get } from 'react-axios'

// localhost
import { localhost } from '../backendConstants'
import { useLocation } from 'react-router-dom'



function BlogPage (props) {
    useEffect(() => {
        document.body.classList.add("profile-page");
        document.body.classList.add("sidebar-collapse");
        document.documentElement.classList.remove("nav-open");
        return function cleanup () {
            document.body.classList.remove("profile-page");
            document.body.classList.remove("sidebar-collapse");
        };
    });

    const [data, setData] = useState([])

    const location = useLocation()

    return (
        <>
            <IndexNavbar />
            <div
                className='wrapper'
            >
                <ProfilePageHeader />
                <div
                    className='section'
                >
                    <Container>
                        <div
                            className='button-container'
                        >
                            <Button
                                className='btn-round'
                                color='info'
                                size='lg'
                            >
                                Follow
                            </Button>
                            <Button
                                className='btn-round btn-icon'
                                color='default'
                                id='tooltip1'
                                size='lg'
                            >
                                <i
                                    className='fab fa-twitter'
                                />
                            </Button>
                            <UncontrolledTooltip
                                delay={0}
                                target='tooltip1'
                                placement='bottom'
                            >
                                Follow me on Twitter !!!
                            </UncontrolledTooltip>
                            <Button
                                className='btn-round btn-icon'
                                color='default'
                                id='tooltip2'
                                size='lg'
                            >
                                <i
                                    className='fab fa-instagram'
                                />
                            </Button>
                            <UncontrolledTooltip
                                delay={0}
                                target='tooltip2'
                                placement='bottom'
                            >
                                Follow me on Instagram !!!
                            </UncontrolledTooltip>
                        </div>
                        <Get
                            url={`${localhost}${location.pathname}`}
                        >
                            {(error, response, isLoading, makeRequest, axios) => {
                                if (error) {
                                    return (
                                        <div>
                                            {error.message}
                                        </div>
                                    )
                                }
                                else if (isLoading) {
                                    return (
                                        <div>
                                            <Wave />
                                        </div>
                                    )
                                }
                                else if (response !== null) {
                                    console.log(response.data)
                                    setData(response.data)
                                    return (
                                        response.data.map((data) =>
                                            <Card>
                                                <CardHeader>
                                                    {data.blog_name}
                                                </CardHeader>
                                                <CardImg
                                                    src={data.blog_picture_context}
                                                ></CardImg>
                                                <CardBody>
                                                    {data.blog_post}
                                                </CardBody>
                                            </Card>
                                        )
                                    )
                                }
                                return (<div>Default</div>)
                            }}
                        </Get>
                    </Container>
                </div>
                <DarkFooter />
            </div>
        </>
    )
}

export default BlogPage

Somehow even though the code is identical, the error occurs.

Actually, I should have commented this code out, it is not the source of the problem as it is not the code that calls the back-end.