SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag

こんにちは、さもです。

Reactで以下のエラー

SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag

の対処法メモです。

エラーメッセージにも書いてありますが、Reactのreturnは１つのタグしか返せないので、例えば、

class UserList extends React.Component
  ~~略~~
  render (
    <button>更新</button>
    <ul>{users}</ul>
  )
end

のようにすると、renderはbuttonタグとulタグを返そうとするのでエラーになります。

この場合は、

class UserList extends React.Component
  ~~略~~
  render (
    <div>
      <button>更新</button>
      <ul>{users}</ul>
    </div>
  )
end

としてあげるとOKです。

スポンサーリンク