CODEWITHSUNDEEP
node.jsreactjs
Joe Peyton
Joe Peyton

Reputation: 3

React Fetch API Data - Object Undefined

I am trying to pull JSON data from Shipstation. All i want to do at this point is store the data in a state object called Orders and render the shipment IDs to a page. I am getting the following error:

Line 25: 'orders' is not defined no-undef

import React, { Component } from "react";
class Orders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orders: []
    };
  }

  componentDidMount() {
    let key = "[MY KEY GOES HERE]";
    let secret = "[MY SECRET GOES HERE]";
const encodedString = new Buffer(key + ":" + secret).toString("base64");

fetch("https://ssapi.shipstation.com/orders/", {
  headers: {
    Authorization: "Basic " + encodedString
  }
})
  .then(res => res.json())
  .then(data => {
    this.setState({ orders: data });
    console.log(orders);
      })
      .catch(err => console.log(err));
  }

  render() {
    const { orders } = this.state;

const orderItems = orders.map(order => (
  <div key={order.id} className="card card-body mb-2">
    <div className="row">
      <div className="col-md-6">
        <p>{order.orderId}</p>
      </div>
    </div>
  </div>
));
return (
  <div ref="myRef">
    <hr />
    <h3 className="mb-4">Recent Shipments</h3>
    {orderItems}
  </div>
);
  }
}

export default Orders;

Upvotes: 0

Views: 637

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17239

That looks like an ESLint error, and it's just saying that you can't do

console.log(orders);

because you haven't actually defined the variable anywhere at that point.

You could change your code to:

const orders = data;
this.setState({ orders });
console.log(orders)

and everything should work fine.

Upvotes: 1

Related Questions