React Invariant Violation: Objects are not valid as a React child

Question

I have the following code:

import ReactDom from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
        $.get(newsfeedURL, function(result) {
            this.setState({
                data: JSON.parse(result),
                loading: false
            });
            console.log(typeof this.state.data.messages);
        }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = Object.keys(this.state.data.messages).map(key => {
         return <div key={key}>Key: {key}, Value: {this.state.data.messages[key]}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}


ReactDom.render(
  <App />,
  document.getElementById('app')
);

but I am getting the following error:

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {body, attachments, videos, topics, updated_at, id, subject, downvotes, author, posted_at, comments, user_vote, upvotes, status, tags, locations, track_impact, user_is_following, comments_count}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App.

I had a look at this answer but it doesn't help in my case: Invariant Violation: Objects are not valid as a React child

Piotr Berebecki · Accepted Answer · 2016-10-01T11:56:22.233

Inside your div your are trying to render Value: {this.state.data.messages[key]} which is an object. You can't render Objects directly using React's JSX. What you can render however are some of the actual primitive data types held in this object (e.g. strings, numbers), for example Value: {this.state.data.messages[key].body} will render the string value held at the body property of the object. Here is a demo: http://codepen.io/PiotrBerebecki/pen/bwowxP

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
        $.get(newsfeedURL, function(result) {
            this.setState({
                data: JSON.parse(result),
                loading: false
            });
            console.log(typeof this.state.data.messages);
        }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = Object.keys(this.state.data.messages).map(key => {
         console.log(this.state.data.messages[key])
         return <div key={key}><b>Key: {key},</b> Value: {this.state.data.messages[key].body}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

YinPeng.Wei · Answer 2 · 2016-11-25T11:48:04.543

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
                $.get(newsfeedURL, function(result) {
                    this.setState({
                        data: result,
                        loading: false
                    });
                }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = this.state.data.messages.map((ele,key) => {
         return <div key={key}>id: {this.state.data.messages[key].id}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

React Invariant Violation: Objects are not valid as a React child

2 Answers2