CODEWITHSUNDEEP
reactjsjsx
Thomas Charlesworth
Thomas Charlesworth

Reputation: 1839

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

 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"
    }
]

Upvotes: 0

Views: 57

Answers (1)

Przemysław Zalewski
Przemysław Zalewski

Reputation: 3996

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.

Upvotes: 3

Related Questions