webエンジニアが子育てするらしいですよ

RubyやPython, JSなど、IT関連の記事を書いています

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は1つのタグしか返せないので、例えば、

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です。

スポンサーリンク