Looping over array: ReactJS Objects are not valid as a React child

Question

 render() {
    var NewsCards = this.state.news.map((b,i)=>{
        return(
            <div key={i} className="row">
                <div className="col-10">
                    <img src={b.image} className="img-fluid"/>
                </div>
            </div>
        )
    })
    return (
        <div className="container-fluid global-container-bottom-padding">
            {RenderIf(this.state.loading)(
            <div id="cssload-pgloading">
                <div className="cssload-loadingwrap">
                    <ul className="cssload-bokeh">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            )}
            {RenderIf(!this.state.loading)(
                { NewsCards }
            )}
        </div>
    );
}

Not quite sure where I went wrong here.

EDIT:

this.state.news is an array of objects

[
    {
        "image":"imgurl",
        "link":"imglink"
    },
    {
        "image":"imgurl",
        "link":"imglink"
    }
]

What type of variable is news? Can you provide example structure? — kudlajz
– kudlajz, Commented Jun 6, 2017 at 9:40

Przemysław Zalewski · Accepted Answer · 2017-06-06 10:00:09Z

3

The issue is here, as you create an object literal with NewsCard field using object property shorthand syntax by mistake:

{RenderIf(!this.state.loading)(
  { NewsCards }
)}

Please change your code to:

!this.state.loading && 
<div>
  {NewsCards}
</div>

or

{RenderIf(!this.state.loading)(
  <div>{NewsCards}</div>
)}

as there is no support for fragments ready yet, at least before React 16.

answered Jun 6, 2017 at 10:00

Przemysław Zalewski

4,0261 gold badge25 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Looping over array: ReactJS Objects are not valid as a React child

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related