simplified the structure and reorganized the rendering in the List view

src/components/SearchForm.jsx

@@ -17,12 +17,12 @@ function SearchForm() {
 			<div className="search-input-container">
 				<label htmlFor="search-input">Search items:</label>
 				<input
-					value={searchItem}
 					type="search"
 					id="search-input"
-					placeholder="Item from list"
+					placeholder="Search list..."
 					onChange={handleSearch}
 					required
+					name="search-input"
 				/>
 				<button type="button" onClick={clearSearch} className="clear-button">
 					x

src/views/List.jsx

@@ -1,28 +1,57 @@
 import { ListItem } from '../components';
-import SearchForm from '../components/SearchForm';
+// import SearchForm from '../components/SearchForm';
 import { useState } from 'react';
 
 export function List({ data }) {
-	const [filteredItems, setFilteredItems] = useState(data);
+	const [searchItem, setSearchItem] = useState('');
 
-	const [searchTerm, setSearchTerm] = useState('');
+	const handleSearch = (e) => {
+		e.preventDefault();
+		setSearchItem(e.target.value);
+	};
 
-	const filteredData = data.filter((item) =>
-		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	const clearSearch = () => {
+		setSearchItem('');
+	};
+
+	const filterItems = data.filter((item) =>
+		item.name.toLowerCase().includes(searchItem.toLocaleLowerCase()),
 	);
 
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<SearchForm onClick={handleSearch} />
+			<form onSubmit={handleSearch}>
+				<div>
+					<label htmlFor="search-input"> Search items:</label>
+					<input
+						onChange={handleSearch}
+						type="search"
+						id="search-item-in-list"
+						value={searchItem}
+						placeholder="Search item..."
+					/>
+					{searchItem && (
+						<button type="button" onClick={clearSearch}>
+							x
+						</button>
+					)}
+					{searchItem && (
+						<ul>
+							{filterItems.map((item) => (
+								<ListItem key={item.id} name={item.name} />
+							))}
+						</ul>
+					)}
+				</div>
+			</form>
+
 			<ul>
-				{searchTerm
-					? filteredItems.map((item) => (
-							<ListItem key={item.id} name={item.name} />
-						))
-					: data.map((item) => <ListItem key={item.id} name={item.name} />)}
+				{data.map((item) => (
+					<ListItem key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);