returnで返すときのルート要素は1つにする

Reactでコンポーネントのreturnで要素を取り扱うときには、そのルート要素は1つでないといけません。

エラーになる要素の渡し方

このように、2つ以上の要素を一挙にreturnしようとするとエラーになります。

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
	return (
		<div>…</div>
		<div>…</div>
		<div>…</div>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

エラーにならない要素の渡し方

要素のルートが1つであればエラーにならないので、何らかの要素で囲いましょう。

①HTML要素で囲う

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
	return (
		<div>
			<div>…</div>
			<div>…</div>
			<div>…</div>
		</div>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

②Fragmentで囲う

Fragmentは、実際にはレンダリングされません。余計な要素を画面表示の際に増やしたくない場合はこのような記述をします。

import React from "react";
import ReactDOM from "react-dom";
import { Fragment } from "react";

const App = () => {
	return (
		<React.Fragment>
			<div>…</div>
			<div>…</div>
			<div>…</div>
		</React.Fragment>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

Fragmentをimportする必要があるので、要注意です。

③省略記法(空タグ)で囲う

空タグで囲うこともできます。Fragmentと同じ働きをします。

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
	return (
		<>
			<div>…</div>
			<div>…</div>
			<div>…</div>
		</>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

この書き方だと、Fragmentをimportする必要がないので楽な上に、記法もシンプルでわかりやすいです。