How to easily debug a shorthand return

2021-02-01 · 1 min · engineering

See this code:

javascript

const arr = [
  {
    title: "ha",
    another: "thing",
  },
  {
    title: "oh",
    another: "stuff",
  },
  {
    title: "hey",
    another: "person",
  },
]

const MyComponent = () => (
  <div>
    {arr.map((item) => (
      <div>{item.title}</div>
    ))}
  </div>
)

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:

diff

const MyComponent = () => (
  <div>
    {arr.map((item) => (
+     console.log(item),
      <div>{item.title}</div>
    ))}
  </div>
)

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?