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

Question

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

It is working for me codepen.io/ashafir20/pen/ybbjzZ?editors=1010 — radix
– radix, Commented May 1, 2017 at 8:05

Mayank Shukla · Accepted Answer · 2017-05-01 08:19:43Z

2

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

edited May 1, 2017 at 8:19

answered May 1, 2017 at 7:58

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

4 Comments

Alan Jenshen Over a year ago

Nope, April is dynamic sir. I have to show the month and the item within.

Alan Jenshen Over a year ago

How can I show the month if I have April, May and June?

Mayank Shukla Over a year ago

@AlanJenshen check the updated answer, don't know how to use lodash map, you can use this it will work :)

Alan Jenshen Over a year ago

this is so genius, ah I need 2 loops! Object.keys does the job, thanks Mayank!

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related