Gagan Gagan - 10 days ago 7
Javascript Question

Error while rendering json data [Reactjs]

The data is in this form:

this.props.tagsview



_getTags() {
console.log(this.props.tagsview);
return this.props.tagsview.map(tags => {
var newItem = tags.map(p => <span className="tag" key={p.tag_id}>{p.name}</span>);
return ({newItem);
});
}





So when I'm running this I'm getting:


error react.js:18893 Uncaught Error: Objects are not valid as a React child (found: object with keys {newItem}). 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.(…)


What am I missing?

Is there another way around?

Answer

there are two issues here.. one is that you are returning a nested list [[]] I think you probably wanted to return just a single list []. you are also returning {newItem} from your outer map function. That is not something React can render. React needs a react element or a list of react elements.

did you mean to do:

return this.props.tagsview.map(tags => {
      return tags.map(p => <span className="tag" key={p.tag_id}>{p.name}</span>);
    });

or possibly

this.props.tagsview
  .reduce((tags, view) => [...tags, ...view.map(t =><span className="tag" key={p.tag_id}>{p.name}</span>)], [])
Comments