0

I am trying to write a very simple React application that will send a GET request to an endpoint, and render the response on the page. The response is in the form of an array (not JSON), and looks like (from Chrome dev tools):

h2Request.jsx:12
(3) [{…}, {…}, {…}]
    0: {requestId: 173648899, type: -89}
    1: {requestId: 1917984867, type: -89}
    2: {requestId: 2097436650, type: -89}
    length: 3
    __proto__: Array(0)

My React app looks like this:

import React, { Component } from "react";
import axios from "axios";
import "../App.css";

class H2Request extends Component {
  state = {
    items: this.props.value
  };

  handleClick = () => {
    axios.get("http://localhost:8003").then(response => {
      console.log(response.data);
      console.log("This object {}", this);
      this.setState({ items: response.data });
    });
  };

  render() {
    return (
      <div className="button_container">
        <button className="button" onClick={() => this.handleClick()}>
          Refresh
        </button>
        <h1>Items: {this.state.items}</h1>
      </div>
    );
  }
}

export default H2Request;

But, I get the following error:

Unhandled Rejection (Error): Objects are not valid as a React child (found: object with keys {requestId, type}). If you meant to render a collection of children, use an array instead.
    in h1 (at h2Request.jsx:24)
    in div (at h2Request.jsx:20)
     in H2Request (at src/index.js:7)

▶ 25 stack frames were collapsed.

(anonymous function)
src/components/h2Request.jsx:14
  11 |   axios.get("http://localhost:8003").then(response => {
  12 |     console.log(response.data);
  13 |     console.log("This object {}", this);
> 14 |     this.setState({ items: response.data });
  15 | ^ });
  16 | };
  17 |

From looking at my second log, This object {}... I can see that the current object does indeed have state updated, but I don't know why I get this error.

MeanwhileInHell
  • 6,780
  • 17
  • 57
  • 106
  • Its what the error says, you're trying to render `items` which is an array of objects. You can render an array of react elements, but an object will always break. – Brian Thompson Jan 14 '20 at 17:43
  • 1
    `{JSON.stringify(this.state.items, null, 2)}` or access properties in the object. You can't render an object directly like that. – ggorlen Jan 14 '20 at 17:47
  • or you can do `{(this.state.items || []).map((item) => item.requestId)}` or whatever you want to print instead of `item.requestId` – Sarju Jan 14 '20 at 17:50
  • 1
    Does this answer your question? [Promise Error: Objects are not valid as a React child](https://stackoverflow.com/questions/37997893/promise-error-objects-are-not-valid-as-a-react-child) – ggorlen Jan 14 '20 at 17:52
  • @ggorlen Your suggestion did the trick. If you want to add an answer, I'll accept it. Thanks all for your help. – MeanwhileInHell Jan 14 '20 at 19:06
  • Glad to hear. Thanks, but I'd prefer to close it as a dupe. This sort of thing shows up in many forms and it's best to have a central, searchable answer for it since it's all the same fundamental problem, `this.state = {foo: {}}`... `return
    {this.state.foo}
    `.     – ggorlen Jan 14 '20 at 19:12
  • No problem. I've voted to have this closed as a dupe. Thanks again. – MeanwhileInHell Jan 15 '20 at 10:51

0 Answers0