React 背景画像の設定

Question

React その他諸々学習中です。

下記ログインページに背景画像を設定したいです。
returnの一番初めのdivタグに設定してみたのですが、エラーとなりました。
このような場合、どこに設定できますがアドバイスいただけますと幸いです。

エラー内容
ーConsider adding an error boundary to your tree to customize error handling behavior.
ーThe above error occurred in the <div> component:

at div
at Home (webpack:///./src/pages/Home.js?:22:83)
at component....

import React, { useState, useEffect } from 'react';

export default function Home(props) {
	const [token, setToken] = useState(''); //authenticated

	const [user, setUser] = useState({
		username: '',
		password: ''
	});
	const [loggedInUser, setLoggedInUser] = useState('');
	const [toggle, setToggle] = useState(true);
	const handleChange = e => {
		setUser({ ...user, [e.target.id]: e.target.value });
	};
	const handleLogin = async e => {
		e.preventDefault();
		try {
			const response = await fetch('/login', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(user)
			});
			const data = await response.json();
			setToken(data.token);
			setLoggedInUser(data.user.username);
			window.localStorage.setItem('token', data.token);
			window.localStorage.setItem('loggedInUser', data.user.username);
		} catch (err) {
			console.error(err);
		}
	};

	const handleRegister = async e => {
		e.preventDefault();
		try {
			const response = await fetch('/register', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(user)
			});
			const data = await response.json();
			setToken(data.token);
			setLoggedInUser(data.user.username);
			window.localStorage.setItem('token', data.token);
			window.localStorage.setItem('loggedInUser', data.user.username);
		} catch (err) {
			console.error(err);
		}
	};
	useEffect(() => {
		if (window.localStorage.getItem('token')) {
			setToken(window.localStorage.getItem('token'));
			setLoggedInUser(window.localStorage.getItem('loggedInUser'));
		}
	}, []);

	return (
		<div style="background: url(../public/img/mandala_1.png)">
			{!token ? (
				<>
					<button onClick={() => setToggle(!toggle)}>
						{toggle ? 'Show Register' : 'Show Login'}
					</button>
					{toggle ? (
						<form onSubmit={handleLogin}>
							<input
								type="text"
								id="username"
								value={user.username}
								onChange={handleChange}
							/>
							<input
								type="password"
								id="password"
								value={user.password}
								onChange={handleChange}
							/>

							<input type="submit" value="Login" />
						</form>
					) : (
						<form onSubmit={handleRegister}>
							<input
								type="text"
								id="username"
								value={user.username}
								onChange={handleChange}
							/>
							<input
								type="password"
								id="password"
								value={user.password}
								onChange={handleChange}
							/>
							<input type="submit" value="Register" />
						</form>
					)}
				</>
			) : (
				<>
					<div>Hello from some {loggedInUser}</div>
				</>
			)}
		</div>
	);
}

Comments

[hoshi-takanori]

<div style={{ background: 'url(img/mandala_1.png)' }}>
としたらどうでしょうか？

[hiro_ike]

コメントありがとうございます。
<div className="NewPage" style={{ background: 'url(/img/mandala_1.png)' }}>
上記のように入れてみたのですが、表示されませんでした。。
下記タグにすると表示されるのですが、backgroundにすると出てきません。。
<img src="/img/mandala_1.png" width="100%" />

Answer 1

cssに下記を追記で表示されました。

body {
background-image:url("/img/mandala_1.png") !important;

コメントありがとうございました。書き方の参考になりました！