NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. React
  3. React エラー「Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?」が発生した場合の対応法

React エラー「Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?」が発生した場合の対応法

React エラー「Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?」が発生した場合の対応法

コンポーネント作成時に「Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?」が発生したので、その際の対応方法を記載

目次

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V12.13.1
  • npm 6.14.1
  • React 16.13.0

エラー原因

Reactのコンポーネントは一番親の要素は１つにしないと上記エラーが発生します。

例として、下記のコードのように一番親の要素が２つになるとエラーが発生します。

export const Sample = () => {
    return (
        <div>test1</div>
        <div>test2</div>
    )
}

対応法

親要素を作成すれば、問題ない

export const Sample = () => {
    return (
        <div>
            <div>test1</div>
            <div>test2</div>
        </div>
    )
}