Merge pull request #22 from the-collab-lab/rt-tc-search-item-in-list

Rt tc search item in list

src/views/List.jsx

@@ -1,11 +1,52 @@
 import { ListItem } from '../components';
+import { useState } from 'react';
 
 export function List({ data }) {
+	const [searchItem, setSearchItem] = useState('');
+
+	const handleSearch = (e) => {
+		e.preventDefault();
+		setSearchItem(e.target.value);
+	};
+
+	const clearSearch = () => {
+		setSearchItem('');
+	};
+
+	const filterItems = data.filter((item) =>
+		item.name.toLowerCase().includes(searchItem.toLocaleLowerCase()),
+	);
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+			<form onSubmit={handleSearch}>
+				<div>
+					<label htmlFor="search-item-in-list"> 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>
 				{data.map((item) => (
 					<ListItem key={item.id} name={item.name} />