eliminated onSearch and simplified the filtering funciton in the List…

… view

src/components/SearchForm.jsx

@@ -1,20 +1,23 @@
-function SearchForm({ onSearch }) {
+import { useState } from 'react';
+
+function SearchForm() {
+	const [searchItem, setSearchItem] = useState('');
+
 	const handleSearch = (e) => {
 		e.preventDefault();
-		const value = e.target.value;
-
-		onSearch(value);
+		setSearchItem(e.target.value);
 	};
 
 	const clearSearch = () => {
-		onSearch('');
+		setSearchItem('');
 	};
 
 	return (
 		<form onSubmit={handleSearch}>
 			<div className="search-input-container">
 				<label htmlFor="search-input">Search items:</label>
 				<input
+					value={searchItem}
 					type="search"
 					id="search-input"
 					placeholder="Item from list"

src/views/List.jsx

@@ -7,27 +7,16 @@ export function List({ data }) {
 
 	const [searchTerm, setSearchTerm] = useState('');
 
-	console.log(data);
-
-	const handleSearch = (searchItem) => {
-		console.log(searchItem);
-		setSearchTerm(searchItem);
-		if (searchItem === '') {
-			setFilteredItems(data);
-		} else {
-			const filtered = data.filter((item) =>
-				item.name.toLowerCase().includes(searchItem.toLowerCase()),
-			);
-			setFilteredItems(filtered);
-		}
-	};
+	const filteredData = data.filter((item) =>
+		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	);
 
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<SearchForm onSearch={handleSearch} />
+			<SearchForm onClick={handleSearch} />
 			<ul>
 				{searchTerm
 					? filteredItems.map((item) => (