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.
