CODEWITHSUNDEEP
javascriptreactjslodash
Alan Jenshen
Alan Jenshen

Reputation: 3239

react map returned error of Objects are not valid as a React child

I failed to render jxs using map of lodash. I have this in my render method

return (
    <div>
    {map(groupedByMonths, (obj, index) => 
        <div className="panel">
        <div className="panel-heading">
        {obj}
        </div>
        <div>{obj.price}</div>
        </div>)}
    </div>
    )

But I got error of Objects are not valid as a React child The groupedByMonths structure look like this

{
    "April": [
        {
            "price": 0,
        },
        {
            "price": 12
        },
        {
            "price": 200
        }
    ]
}

Upvotes: 1

Views: 109

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104479

Don't know how to do this with lodash map, i can suggest this:

{Object.keys(groupedByMonths).map((obj, index) => 
     <div className="panel">
         <div className="panel-heading">
             {obj}
         </div>
         {groupedByMonths[obj].map((el, i) => <div key={i}> {el.price} </div>)}
     </div>)
}

When we use Object.keys(groupedByMonths) it will return an array that will contain all the keys, and we can use map on that. To print the key use {obj} and to print the values use {groupedByMonths[obj]}.

Upvotes: 2

Related Questions