Change JSX editing style

Question

I just spent hours trying to figure out what broke my sample application before I found this:

Working example:

let cards = this.props.cards.map(
  (card) => {
    return <Card id = {card.id}
                 title = {card.title}
                 description = {card.description}
                 color = {card.color}
                 tasks = {card.tasks} />
  });

Bad example:

let cards = this.props.cards.map(
  (card) => {
    return 
    <Card id = {card.id}
          title = {card.title}
          description = {card.description}
          color = {card.color}
          tasks = {card.tasks} />
  });

Should the JSX syntax be sensitive or am I missing something else?

Answer 1

In your broken example, the result will be

[undefined, ...., undefined]

because the JS interpreter understands this (note ;after return)

let cards = this.props.cards.map(
  (card) => {
    return;

    <Card id = {card.id}
          title = {card.title}
          description = {card.description}
          color = {card.color}
          tasks = {card.tasks} />
  });

if you added a new line after return- the JS interpreter automatically inserts a semicolon, and this is not a problem with JSX