How to use axios with React to make AJAX requests - node.js

Question

Attempting to make an AJAX request with axios and display the data in React component. Getting an error saying map is not a function, and 404 on the GET request. The POST request works great. Tested in Postman and the GET request works if http://localhost:8080/breakfast-tacos...can get the data to display in the console, but not in my CommentBox component. What am I doing wrong?
//COMMENTBOX COMPONENT
import React from 'react';
import Axios from 'axios';
import Rater from 'react-rater';
import './comment-styles.scss';
export class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = {
reviews: []
}
this.addReview = this.addReview.bind(this);
};
addReview() { /*Post Request*/
Axios({
method: 'POST',
url: 'http://localhost:8080/breakfast-tacos/reviews',
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
this.setState({ reviews: response.data.reviews })
}).catch(error => console.log(error))
}
componentDidMount() {
Axios.get('http://localhost:8080/breakfast-tacos/reviews') /*Get Request*/
.then(reviews => {
this.setState({ reviews: reviews.data })
})
.catch(err => console.log(err))
};
render() {
return (
<div id="commentWrapper">
<div className="commentHeader">
<h5>Leave a Rating!</h5>
<Rater style={{fontSize: '35px'}} />
<button id="submitRatingBtn" type="submit">Submit</button>
<form action="/breakfast-tacos" method="POST">
<textarea className="reviewTextBox" maxLength="250" placeholder="Write a review..." name="reviews"></textarea>
<button id="submitReviewBtn" type="submit" onClick={this.addReview}>Submit</button>
</form>
</div>
<hr />
<div className="reviews">
<span className="user">
<h6>username:</h6>
</span>
<span className="text">
{this.state.reviews.map((review, text) => { /*Where I want to display the data*/
return (
<p key={text}>
{review}
</p>
)
})}
</span>
</div>
<hr />
</div>
)
}
};
//EXPRESS SERVER
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 8080;
const cors = require('cors');
const MongoClient = require('mongodb').MongoClient;
const dbUrl = process.env.DATABASE_URL;
MongoClient.connect(dbUrl, { useNewUrlParser: true, useUnifiedTopology: true }, (err, client) => {
// CHECK FOR CONNECTION TO DATABASE ERRORS, VERIFY DATABASE CONNECTION
if (err) throw err;
console.log(`Database connected successfully!`);
//GLOBAL DATABASE VARIABLES
const db = client.db('recipedb');
const dbCollection = db.collection('breakfast-tacos');
//MIDDLEWARES
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true} ));
//POST OR CREATE ROUTES
app.post('/breakfast-tacos', (req, res) => {
dbCollection.insertOne(req.body)
.then(results => {
console.log('1 document inserted...');
})
.catch(error => console.error(error));
});
//GET OR READ ROUTES
app.get('/breakfast-tacos/', (req, res) => {
dbCollection.find().toArray()
.then(results => {
res.send({ reviews: results });
})
.catch(error => console.error(error))
});
});
//SERVER
app.listen(port, () => {
console.log(`Server is running on port ${port}...`);
});
// MAIN APP COMPONENT
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import { Home } from './home.js';
import { Breakfast } from './breakfast.js';
import { LunchDinner } from './lunch-dinner.js';
import { Sides } from './sides.js';
import { Desserts } from './desserts.js';
import { Snacks } from './snacks.js';
import { Misc } from './misc.js';
import { About } from './about.js';
class App extends React.Component {
componentDidMount() {
Axios({ /*This GET request shows an array of data in the console*/
method: "GET",
url: "http://localhost:8080/breakfast-tacos",
headers: {
"Content-Type": "application/json"
}
}).then(res => {
console.log(res.data.reviews);
})
.catch(error => console.log(error))
}
render() {
return (
<Router>
<div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/breakfast" exact component={Breakfast} />
<Route path="/lunch-dinner" exact component={LunchDinner} />
<Route path="/sides" exact component={Sides} />
<Route path="/desserts" exact component={Desserts} />
<Route path="/snacks" exact component={Snacks} />
<Route path="/misc" exact component={Misc} />
<Route path="/about" exact component={About} />
</Switch>
</div>
</Router>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
// ERRORS
/*Error which indicates something wrong with the url*/
/*UPDATE: I removed "reviews" after testing in Postman and no longer getting 404 error, now getting map is not a function error*/
xhr.js:177 GET http://localhost:8080/breakfast-tacos/reviews 404 (Not Found)
/*How the data is being displayed in the console*/
18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {_id: "600f6f2510e2f91da0a0b4da", reviews: "Testing 1"}1: {_id: "600f6fb410e2f91da0a0b4db", reviews: "Testing 1"}2: {_id: "6010e787ea6c5c1fb43f471d", reviews: "Testing 2"}3: {_id: "6010ee90ea6c5c1fb43f471e", reviews: "Test 3"}4: {_id: "6010fb2ec91e161344cacf39"}5: {_id: "6010fb33c91e161344cacf3a"}6: {_id: "6010fb42c91e161344cacf3b"}7: {_id: "6010fb51c91e161344cacf3c", reviews: "TESTING"}8: {_id: "6010fb5dc91e161344cacf3d"}9: {_id: "6010fb6bc91e161344cacf3e"}10: {_id: "6010fbe9c91e161344cacf3f"}11: {_id: "6010fc0cc91e161344cacf40"}12: {_id: "6010fc0dc91e161344cacf41"}13: {_id: "6010fc0dc91e161344cacf42"}14: {_id: "6010fc0ec91e161344cacf43"}15: {_id: "6010fc12c91e161344cacf44"}16: {_id: "6010fc785969750b0875580d", reviews: "fehafasdfasd"}17: {_id: "60120812fc750a0830ca1052", reviews: "does this work"}length: 18__proto__: Array(0)