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-01 11:56:22Z

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 · Accepted Answer · 2016-11-25 11:48:04Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related