初学者あるあるらしい?

前提

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