0

Came across the below code in the apollo docs today. I thought that when you have a multi-line return statement in a functional component that you have to wrap everything in parentheses? So, right after return you'd open the parentheses, like this: return(.

I'm confused why this return statement works:

export default function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

Edit: the suggested answer doesn't answer the question for me. I'd appreciate an answer that addresses the JSX also. For example, someone has said the () are not even necessary to wrap the JSX here so I'm extra confused why the material on this say to enclose a multi-line return statement in ().

cheznead
  • 1,999
  • 7
  • 24
  • 40
  • 2
    Probably because the multiline jsx is already wrapped in the map – Pauline Apr 17 '21 at 18:28
  • There are parentheses inside the map callback around the returned JSX. – Emile Bergeron Apr 17 '21 at 18:29
  • 1
    Does this answer your question? [Why use parentheses when returning in JavaScript?](https://stackoverflow.com/questions/20824558/why-use-parentheses-when-returning-in-javascript) – Emile Bergeron Apr 17 '21 at 18:30
  • @EmileBergeron Actually, those parenthesis are unnecessary - the JSX expression is valid without them. – Bergi Apr 17 '21 at 18:38
  • @EmileBergeron Yes I am aware of that. The question was why does the '(' not need to come directly after the return keyword when it's a multiline return. – cheznead Apr 17 '21 at 18:48
  • @cheznead that's explained in the linked question. It would be necessary if the `data.rates.map` was on its own line, below `return`, but since it isn't, it's unnecessary. – Emile Bergeron Apr 17 '21 at 18:51
  • Yes, but that's part of my question/confusion. Why is the data.rates.map not inside the () also? – cheznead Apr 17 '21 at 18:53
  • In fact @EmileBergeron look at the answer at your linked question with 105 upvotes by andru. He says: "Using parentheses when returning is necessary if you want to write your return statement over several lines". And in his example, the ( comes directly after the return. So it does not answer my question. – cheznead Apr 17 '21 at 18:55
  • 1
    @cheznead it's usually used to prevent [automatic semicolon insertion](https://stackoverflow.com/q/2846283/1218980), and in your example, there's no need since there's no ambiguity for JavaScript. It would be necessary for multiline only when the `return` statement is alone on its line. – Emile Bergeron Apr 17 '21 at 18:56
  • So the ( is not a rule? Then the question you linked to contradicts that in for example andru's answer I mentioned. – cheznead Apr 17 '21 at 18:57
  • 1
    I wouldn't say it contradicts anything, but I do agree that this specific answer doesn't explain why. [Another answer below](https://stackoverflow.com/a/38864125/1218980) does explain why. The term _multiline_ is misleading in your case since it's true that your example spreads over multiple lines, though the multiline that they're talking about is when the returned values start on the line below the `return` keyword. – Emile Bergeron Apr 17 '21 at 19:21
  • 2
    ah ok, thank you. I think I get it now. So if you add a line break, you need to introduce ( right after return keyword, but if you begin statement after return, you don't need it. – cheznead Apr 17 '21 at 19:31

0 Answers0