Error: Objects are not valid as a React child (found: object with keys…)

Question

I am trying to loop through the array of objects. Value of this.state.saveFriendTag or this.props.userTags on console is:

State in constructor is: saveFriendTag: this.props.userTags? this.props.userTags: [],

Code is:

if(this.props.cardData){
  if (this.state.saveFriendTag.length == 1) {
    taggedFriendsBlue =  this.state.saveFriendTag.map((item, index) => {
      console.log(item,"item");
      return (
        <span className="displayedName blue" key={index}>{item.firstname}</span>
      )
    })
  }

This is in return and taggedFriendsBlue is defined in render:

 <div className="pCard_contentContainer ">
     <textarea id="pcardTextarea" type="text" placeholder="Write Description here..." value={this.state.Description} onChange={this.textareaExpansion.bind(this)}></textarea>
       <If test={this.state.tagDone == true || this.state.saveFriendTag.length>0}>
       <div className="displayNames disp_inliFl">
         <span className="pcard_WithOne">-With</span>
           <div className="disp_inliFl">
               {taggedFriendsBlue}
           </div>
       </div>
    </If>
  </div>

Can anybody tell the reason for this console error? How to correct it?

If the collection you are attempting to iterate is an Array, you don't have to specify Object.keys — Wolfie

Wolfie Wolfie · Accepted Answer · 2017-08-04T17:58:52

It looks like the issue is that you are using Object.keys on an array. You can remove that and just use .map directly.

Additionally, you need to specify a key for the span.

<span key={item.id} ... />

const array = [
  {
    firstName: "test",
    lastName: "test2"
  }
];

console.log(Object.keys(array));

As you can see from the code snippet, using Object.keys on an array will result in the index being passed on each iteration of the map function, instead of the object as you intend.

Error: Objects are not valid as a React child (found: object with keys…)

1 Answers