2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Adjacent JSX elements must be wrapped in an enclosing tag.

Posted at

初学者あるあるらしい?

前提

React 17.0.1

起こったこと

こういうコンポーネントを作成して


const LogoutButton = ({username, handleLogout}) => {
	return (
		<p>{username} logged in</p>
		<button onClick={handleLogout}>logout</button>
	)
}

export default LogoutButton

こういうふうに使いました。

<div>
	<Title user={user} />
	{user && <LogoutButton username={user.name} handleLogout={logoutHandler} />}
	{user === null && loginForm()}

(以下略)
</div>

そしたらこのように言われました。

SyntaxError: /Users/xxx/projects/bloglist_frontend/src/components/LogoutButton.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 

修正

Adjacent JSX elements must be wrapped in an enclosing tag.

↑一旦言われた通りにやってみます。
とりあえずdivで囲んでみます。

const LogoutButton = ({username, handleLogout}) => {
	return (
		<div>
			<p>{username} logged in</p>
			<button onClick={handleLogout}>logout</button>
		</div>
	)
}

export default LogoutButton

これでエラーは解消されました。が、後続の

Did you want a JSX fragment <>...</>? 

が気になったので確認してみました。

Fragments

<React.Fragment></React.Fragment>

で囲めば余分なノードをDOMに追加せずに複数要素を返すことができるとのこと。つまり、上記のような余分なdivを付け加えなくてもいいということらしいです。
こういうふうに書ける↓


import React from 'react'

const LogoutButton = ({username, handleLogout}) => {
	return (
	<React.Fragment>
		<p>{username} logged in</p>
		<button onClick={handleLogout}>logout</button>
	</React.Fragment>
	)
}

export default LogoutButton

ショートシンタックスもあるようで、こちらの方が読みやすく書きやすいのでこちらを積極的に使ったほうがよさそうに思います。ただ、ショートシンタックスはkeyプロパティに対応していないなど若干の違いがあるようです。

//Fragment short syntax
const LogoutButton = ({username, handleLogout}) => {
	return (
	<>
		<p>{username} logged in</p>
		<button onClick={handleLogout}>logout</button>
	</>
	)
}

export default LogoutButton
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?