iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

【React】Parsing error: JSX expressions must have one parent elementというのに出くわした

最近React入門したので、Webフロント周りも記事にしていこうと思います👷‍♀️

結論

JSXで下記のようなものを書いてたら、エラーに出くわした。

  public render() {
    return (
      <div>
        hoge
      </div>
      <div>
        hoge
      </div>
    )
  }

Parsing error: JSX expressions must have one parent element

どうやら、JSXでは二つの要素を返却することができないっぽいですね。ということで、下記のように修正。React.Fragmentは複数の要素をグルーピングするためのタグで、HTMLのタグとしては出力されないので、<div>でまとめるよりスマートに書くことができます。

  public render() {
    return (
      <React.Fragment>
        <div>hoge</div>
        <div>hoge</div>
      </React.Fragment>
    )
  }

てな感じで本日は以上となります🍺

参考

その他の記事

yamato8010.hatenablog.com

yamato8010.hatenablog.com

yamato8010.hatenablog.com