_kud's tech blog

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]
15
16const 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?