
How to easily debug a shorthand return
like a map().
See this code:
1const arr = [2 {3 title: "ha",4 another: "thing",5 },6 {7 title: "oh",8 another: "stuff",9 },10 {11 title: "hey",12 another: "person",13 },14]1516const MyComponent = () => (17 <div>18 {arr.map((item) => (19 <div>{item.title}</div>20 ))}21 </div>22)
As you can see, you've got here a shorthand return for your Array.map()
.
But for a reason you want to debug item
without uncoding this shorthand and code a classic return like arr.map(item => { return ... })
.
This is my solution:
1const MyComponent = () => (2 <div>3 {arr.map((item) => (4+ console.log(item),5 <div>{item.title}</div>6 ))}7 </div>8)
Yyyyyes.
This can be possible because we use the comma operator (,
) which evaluates any expression and will return the last element.
Nice trick, isn't it?