Loop and render an object in React.js

Question

I'm trying to render an object inside an element (Panel element in react-bootstrap).

import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = React.createClass({
  render () {
    return (
      <Panel header="Network Details" bsStyle="info">
        {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) {
            return <span key={id}>{this.props.dataDetail[detail]}</span>;
        }.bind(this))}
      </Panel>
    )
  }
})

export default NetworkDetail

But that doesn't work. The error thrown is

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {self}). 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 'NetworkDetail'.

What I don't understand is that if I use

return <span key={id}>{this.props.dataDetail.myProperty}</span>;

it works.

How can I render all the properties and values of my object ?

Are you sure none of the keys in props.dataDetails might resolve an object in this.props.dataDetail[detail]? — SimpleJ
– SimpleJ, Commented Jul 18, 2016 at 19:18
Oh snap, the dataDetail object has actually a property named _links which is an object... (the app consumes a REST HATEOAS backend). If this _linksobject is the cause, how should I get rid of ? Maybe with underscore.js (I actually already use underscore.js to reformat my data) ? — Clafouti
– Clafouti, Commented Jul 18, 2016 at 20:10
You could use Underscore's omit function to filter _links. A better option might be to create a list of the keys you want to render and use Underscore's pick function instead. See: underscorejs.org/#omit — SimpleJ
– SimpleJ, Commented Jul 18, 2016 at 20:39
Thank you for your help. I accepted the answer below but you totally nailed the initial problem (the object inside my object). Thanks again. — Clafouti
– Clafouti, Commented Jul 19, 2016 at 8:36

Cheng Sieu Ly · Accepted Answer · 2016-07-19 17:02:29Z

8

It looks to me that this component is a stateless/dumb component. So, you should begin by reading about how to write these kind of components to maximize efficiency: https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

Then, to fix your component, you should notice that

    {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) {
        return <span key={id}>{this.props.dataDetail[detail]}</span>;
    }.bind(this))}

is just a conditional statement. Notice your '&&'. So, assuming that this.props.dataDetail is an object, you can rewrite this component like this:

import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = ({dataDetail}) => 
  <Panel header="Network Details" bsStyle="info">
    {
      Object.keys(dataDetail).filter(v => v !== '_links').map((detail, id) => <span key={id}>{dataDetail[detail]}</span>)
    }
  </Panel>

export default NetworkDetail;

Let me know if this works!

edited Jul 19, 2016 at 17:02

answered Jul 18, 2016 at 21:59

Cheng Sieu Ly

1,1669 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cheng Sieu Ly Over a year ago

glad it worked out for you @Clafou. please let me know if you run into any other trouble =)

Collectives™ on Stack Overflow

Loop and render an object in React.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related