conditionally render the ErrorMessage component

src/components/ErrorMessage.css

@@ -1,8 +0,0 @@
-.errorMessage {
-	height: 5rem;
-}
-
-p {
-	margin: 0;
-	padding: 0;
-}

src/components/ErrorMessage.jsx

@@ -1,11 +1,7 @@
 import './ErrorMessage.css';
 
 const ErrorMessage = (props) => {
-	return (
-		<div className="errorMessage">
-			{props.errorMessage !== '' ? <p>{props.errorMessage}</p> : <></>}
-		</div>
-	);
+	return <div className="errorMessage">{<p>{props.errorMessage}</p>}</div>;
 };
 
 export default ErrorMessage;

src/views/Home.css

@@ -0,0 +1,3 @@
+.Home__form {
+	height: 8rem;
+}

src/views/Home.jsx

@@ -12,13 +12,15 @@ export function Home({ data, setListPath, userId, userEmail }) {
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
-			<ListForm
-				setMessage={setMessage}
-				setListPath={setListPath}
-				userId={userId}
-				userEmail={userEmail}
-			/>
-			<ErrorMessage errorMessage={message} />
+			<div className="Home__form">
+				<ListForm
+					setMessage={setMessage}
+					setListPath={setListPath}
+					userId={userId}
+					userEmail={userEmail}
+				/>
+				{message !== '' && <ErrorMessage errorMessage={message} />}
+			</div>
 			<ul>
 				{data.map((list, i) => (
 					<SingleList

src/views/ManageList.css

@@ -0,0 +1,3 @@
+.ManageList__form {
+	height: 8rem;
+}

src/views/ManageList.jsx

@@ -7,7 +7,7 @@ import { inputHasValue, hasSameValue } from '../utils/inputValidation';
 
 export function ManageList({ data, listPath, userId, userEmail }) {
 	const [addItemErrMessage, setAddItemErrMessage] = useState('');
-	const [errMessage, setErrMessage] = useState('');
+	const [shareListErrMessage, setShareListErrMessage] = useState('');
 
 	async function handleSubmit(e) {
 		e.preventDefault();
@@ -58,13 +58,13 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 		let email = mailFormData.get('email');
 
 		if (!inputHasValue(email)) {
-			setErrMessage('Share the list by entering a valid user email');
+			setShareListErrMessage('Share the list by entering a valid user email');
 			mailForm.reset();
 			return;
 		}
 
 		if (email === userEmail) {
-			setErrMessage(
+			setShareListErrMessage(
 				'To share the list, enter the email of a user that is not you',
 			);
 			mailForm.reset();
@@ -81,43 +81,49 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 	}
 
 	return (
-		<>
+		<div className="ManageList">
 			<p>
 				Hello from the <code>/manage-list</code> page!
 			</p>
-			<form method="post" onSubmit={handleSubmit}>
-				<label>
-					Add item
-					<input
-						type="text"
-						name="item"
-						onChange={() => setAddItemErrMessage('')}
-					></input>
-				</label>
-				<label htmlFor="time-select">When do I need it?</label>
-				<select name="time" id="time-select">
-					<option value="soon">Soon (within 7 days)</option>
-					<option value="soonIsh">Soon-ish (in 14 days)</option>
-					<option value="notSoon">Not soon (in 30 days)</option>
-				</select>
-				<button type="submit">Submit</button>
-			</form>
-			<ErrorMessage errorMessage={addItemErrMessage} />
-
-			<hr></hr>
-			<form method="post" onSubmit={sendInvite}>
-				<label htmlFor="email">
-					Share List with another user
-					<input
-						type="email"
-						name="email"
-						id="email"
-						onChange={() => setErrMessage('')}
-					></input>
-				</label>
-				<button type="submit">Submit</button>
-			</form>
-			<ErrorMessage errorMessage={errMessage} />
-		</>
+			<div className="ManageList__form">
+				<form method="post" onSubmit={handleSubmit}>
+					<label>
+						Add item
+						<input
+							type="text"
+							name="item"
+							onChange={() => setAddItemErrMessage('')}
+						></input>
+					</label>
+					<label htmlFor="time-select">When do I need it?</label>
+					<select name="time" id="time-select">
+						<option value="soon">Soon (within 7 days)</option>
+						<option value="soonIsh">Soon-ish (in 14 days)</option>
+						<option value="notSoon">Not soon (in 30 days)</option>
+					</select>
+					<button type="submit">Submit</button>
+				</form>
+				{addItemErrMessage !== '' && (
+					<ErrorMessage errorMessage={addItemErrMessage} />
+				)}
+			</div>
+			<div className="ManageList__form">
+				<form method="post" onSubmit={sendInvite}>
+					<label htmlFor="email">
+						Share List with another user
+						<input
+							type="email"
+							name="email"
+							id="email"
+							onChange={() => setShareListErrMessage('')}
+						></input>
+					</label>
+					<button type="submit">Submit</button>
+				</form>
+				{shareListErrMessage !== '' && (
+					<ErrorMessage errorMessage={shareListErrMessage} />
+				)}
+			</div>
+		</div>
 	);
 }