How to easily debug a shorthand return

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?