Merge pull request #22 from the-collab-lab/bo_ce_filter_list

Bo ce filter list

src/components/SearchList.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+const SearchList = ({ data, setNewList }) => {
+	const [value, setValue] = useState('');
+
+	const handleFiltering = (e) => {
+		const userInput = e.target.value.toLowerCase();
+		setValue(e.target.value);
+		const gatherItem = [];
+		for (let i = 0; i < data.length; i++) {
+			if (data[i]?.name.toLowerCase().includes(userInput)) {
+				gatherItem.push(data[i]);
+			}
+		}
+		setNewList(gatherItem);
+	};
+
+	const resetInput = (e) => {
+		e.preventDefault();
+		setValue('');
+		setNewList(data);
+	};
+
+	return (
+		<form>
+			<label htmlFor="search">Search item</label>
+			<input
+				id="search"
+				type="text"
+				onChange={(e) => handleFiltering(e)}
+				value={value}
+			/>
+			<button onClick={(e) => resetInput(e)} aria-label="clear search bar">
+				x
+			</button>
+		</form>
+	);
+};
+
+export default SearchList;

src/views/List.jsx

@@ -1,13 +1,24 @@
+import { useState, useEffect } from 'react';
 import { ListItem } from '../components';
+import SearchList from '../components/SearchList';
+import { useParams } from 'react-router-dom';
 
 export function List({ data }) {
+	const [newList, setNewList] = useState([]);
+	const { path } = useParams();
+
+	useEffect(() => {
+		setNewList(data);
+	}, [data]);
+
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<h2>
+				You are on the <code>{path}</code> list!
+			</h2>
+			<SearchList data={data} setNewList={setNewList} />
 			<ul>
-				{data.map((item) => (
+				{newList.map((item) => (
 					<ListItem key={item.id} name={item.name} />
 				))}
 			</ul>