How to render array of objects in reactjs 1.0 with jsx?

Question

I have the following:

var repos = [{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"}]

In my react component code:

var React = require('react');

var Repos = React.createClass({
    propTypes: {
        username: React.PropTypes.string.isRequired,
        repos: React.PropTypes.array.isRequired
    },
    render: function() {
        return (
            <div> REPOS<br />
                Username: {this.props.username} <br />
                Repos: {this.props.repos}           
            </div>
        )
    }
});

module.exports = Repos;

I see that: {this.props.repos} returns the above, but I am getting an error:

Uncaught Error: Invariant Violation: Objects are not valid as a React child... check the render method.

How do I get around this? Is there a way to just output everything without iterating/looping through each one? I know I can do so in AngularJS, but I don't get why react is giving me a hard time.

I am using the newest version of react; I don't think this was a problem with 0.13.

Dan Prince · Accepted Answer · 2015-11-29 06:59:08Z

1

Stringify it:

{JSON.stringify(this.props.repos)}

edited Nov 29, 2015 at 6:59

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

answered Nov 29, 2015 at 2:06

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

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

Comments

nbermudezs · Accepted Answer · 2015-11-29 02:14:37Z

That depends on how you want to display the values in your HTML.

You could do something like

render: function() {
    return (
        <div> REPOS<br />
            Username: {this.props.username} <br />
            Repos:
            {this.props.repos.map(function(repo){
              return <div><span>{repo.keya}</span></div>;
            }}           
        </div>
    )
}

In general, you want to iterate over the array of values and return a HTML representation of it. That is why you are getting the error you mentioned, React doesn't provide a default HTML representation of an object so there is no way it will know how to display your array.

If you just want to display it as a text then the stringify method on the other answer is the way to go. But if you are expecting a pretty formatted output you will have to iterate over the array.

Collectives™ on Stack Overflow

How to render array of objects in reactjs 1.0 with jsx?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related