title: React - Request Fetch Parse Issue
body: <p>I've been dipping my toe into React and am stuck on an issue as I've tried to use my own examples from a past project.</p>
  
  <p>For this question I will use the following API url <a href="https://webservices.rrts.com/TrackWebApi/api/values/443974522" rel="nofollow noreferrer">https://webservices.rrts.com/TrackWebApi/api/values/443974522</a></p>
  
  <p>It returns details about a shipment (or an array if you enter multiple numbers in for a search). In this case, I will only worry about one.</p>
  
  <p>Based on examples and tutorials, I have come to this set of codes as a proper way of handling the return and passing the data off to a new page:</p>
  
  <pre><code>  _executeQuery = (query) =&gt; {
      console.log(query);
      this.setState({ isLoading: true });
      fetch(query, {
    method: 'GET'})
        .then(response =&gt; response.json())
        .then(json =&gt; this._handleResponse(json.response))
        .catch(error =&gt;
          this.setState({
            isLoading: false,
            message: 'Something bad happened ' + error
        }));
    };
  
    _handleResponse = (response) =&gt; {
      console.log(response);
      this.setState({ isLoading: false , message: '' });
       this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults},);
    };
  </code></pre>
  
  <p>This returns in the console the first (which is the query):
  <code>https://webservices.rrts.com/TrackWebApi/api/values/443974522</code></p>
  
  <p>and this is what <code>response</code> returns:
  <code>undefined</code></p>
  
  <p>Now, playing around with it, if I change the <code>_executeQuery</code> to:</p>
  
  <pre><code>  _executeQuery = (query) =&gt; {
      console.log(query);
      this.setState({ isLoading: true });
      fetch(query, {
    method: 'GET'})
        .then(response =&gt; this._handleResponse(response))
        .catch(error =&gt;
          this.setState({
            isLoading: false,
            message: 'Something bad happened ' + error
        }));
    };
  </code></pre>
  
  <p>Then <code>query</code> returns:
  <code>https://webservices.rrts.com/TrackWebApi/api/values/443974522</code></p>
  
  <p>And <code>response</code> from _handleResponse returns:</p>
  
  <pre><code>Response {
    "_bodyInit": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
    "_bodyText": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
    "headers": Headers {
      "map": Object {
        "cache-control": "no-cache",
        "content-encoding": "gzip",
        "content-length": "1322",
        "content-type": "application/json; charset=utf-8",
        "date": "Sat, 03 Nov 2018 17:41:02 GMT",
        "expires": "-1",
        "pragma": "no-cache",
        "server": "Microsoft-IIS/8.0",
        "vary": "Accept-Encoding",
        "x-aspnet-version": "4.0.30319",
        "x-powered-by": "ASP.NET",
      },
    },
    "ok": true,
    "status": 200,
    "statusText": undefined,
    "type": "default",
    "url": "https://webservices.rrts.com/TrackWebApi/api/values/443974522",
  }
  </code></pre>
  
  <p>What would be the proper method in this case to return the array of <code>SearchResults</code>? </p>
  
  <p>At this point I pass the data to my result screen through this method: <code>this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults}</code></p>
  
  <p>But what would be the correct response parsing to pass it? At this moment, nothing appears, but I am certain it is because of my handling with the initial parse.</p>
  
  <p>Thanks for your help and any guidance.</p>