Reactで、returnに()がつくとき

Question

下の、２つのコードはどちらもmapメソッドを使用していますが、上のコードはreturnに（）はありませんが、下のコードにはありますよね。
これらはどのようにして判断されるものでしょうか？

render(){
  const fruitList=["リンゴ","ミカン","バナナ"];
  return(
    <div>
      {fruitList.map((fruititem)=>{
         return <p>{fruititem><p>
      })}
    </div>
  )
}

    return (
      <div>
        <h1>言語一覧</h1>
        <div className='language'>
          {languageList.map((languageItem) => {
            return (
              <Language 
                name={languageItem.name}
                image={languageItem.image}
              />              
            )
          })}
        </div>
      </div>
    );

Answer 1

returnそのものは、return;あるいはreturn 式;であればいいので、式の前後にカッコを入れてreturn(式);としても意味は変わりません。

一方で、JavaScriptにはセミコロンの自動挿入という挙動があって、return（改行）としてしまうと、return;と書いたものとみなされてしまいます。JSXなど長い式をreturnしたい場合に、この改行による挙動を避けるため、return(で始めて、改行を式の途中にする、ということが行われます。

Comments

[maisumakun]

もちろん、「return <Language（改行して続きを書く）」ような書き方でも文法的には成立しますが、あまり好まれません。