filter is applied

src/components/Todo/Todo.js

@@ -6,6 +6,7 @@ const Todo = () => {
 	const isDataFetched = useRef(false);
 	const [isLoading, setIsLoading] = useState(true);
 	const [errorMessage, setErrorMessage] = useState("");
+	const [filter, setFilter] = useState("");
 
 	const apiFun = async () => {
 		let responseData = await fetch(
@@ -28,6 +29,10 @@ const Todo = () => {
 		isDataFetched.current = true;
 	}, []);
 
+	const handleChangeFilter = (event) => {
+		setFilter(event.target.value);
+	};
+
 	if (isLoading) {
 		return <LoadingSpinner />;
 	}
@@ -36,13 +41,38 @@ const Todo = () => {
 		return <div>{errorMessage}</div>;
 	}
 
+	let todoList = value;
+
+	if (filter === "Completed") {
+		todoList = value.filter((todo) => todo.completed);
+	} else if (filter === "Incompleted") {
+		todoList = value.filter((todo) => !todo.completed);
+	}
+
 	return (
 		<div>
-			<ul>
-				{value.map((val) => {
-					return <li key={val.id}>{val.title}</li>;
-				})}
-			</ul>
+			<div className="main-content">
+				<div className="todo-list-content">
+					<ul>
+						{todoList.map((val) => {
+							return <li key={val.id}>{val.title}</li>;
+						})}
+					</ul>
+				</div>
+				<div className="short-content">
+					<label>Filter: </label>
+					<select
+						name="filter"
+						value={filter}
+						onChange={handleChangeFilter}
+					>
+						<option value="">-- Please Select --</option>
+						<option value="Completed">Completed</option>
+						<option value="Incompleted">Incompleted</option>
+						<option value="Both">Both</option>
+					</select>
+				</div>
+			</div>
 		</div>
 	);
 };

src/styles/App.css

@@ -36,3 +36,17 @@
     transform: rotate(360deg);
   }
 }
+.main-content{
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+/* .main-content .todo-list-content{} */
+.main-content .todo-list-content ul{
+  list-style: number;
+}
+.main-content .todo-list-content ul li{
+  padding: 10px;
+}