TypeError: undefined is not a function with React and Express

Question

I am trying to output the contents of this array to my web page using react and express:

[{"LocationName":"LIBERTY DOGS","Address":"105 Greenwood Ave N, Seattle WA","Available":"Y"},{"LocationName":"FREEDOM DOGS","Address":"105 Greenwood Ave N, Seattle WA","Available":"Y"}]

I keep getting an 'Unhandled Rejection (TypeError): undefined is not a function (near '...this.state.vendors.map...')'

Here is my script in React to communicate with my backend and to display it on my web page:

 import React from "react"; import { Component } from "react"; // import VendorRenderBox from './VendorRenderBox'; import AdminSideNav from "../components/AdminSideNav"; import { Container, Row, Col } from "react-bootstrap"; class AdminPage extends Component { constructor() { super(); this.state = { vendors: [] }; } componentDidMount() { fetch("http://localhost:3000/admin/vendors/") .then(res => res.json) .then(vendors => this.setState({ vendors })); } render() { return ( <Container fluid> <Row> <Col xs="4" sm="3" md="3" lg="2" xl="2" style={{ paddingLeft: "0" }}> <AdminSideNav /> </Col> <Col xs="8" sm="9" md="9" lg="10" xl="10" style={{ paddingTop: "75px" }} > <h6> Active list of vendors: </h6> <ul> {this.state.vendors.map(vendor => ( <li key={vendor.LocationName}> {vendor.Address} </li> ))} </ul> {/* <AdminRenderBox /> */} </Col> </Row> </Container> ); } } export default AdminPage;

Answer 1

execute the json() method:

  .then(res => res.json())

instead of

  .then(res => res.json)