Alex Alex - 2 months ago 15
React JSX Question

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

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

Answer

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')
);