[feat] mark as completed

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/App.js

@@ -1,15 +1,8 @@
-import React from 'react';
+import React from "react";
-import logo from './logo.svg';
+import logo from "./logo.svg";
-import './App.css';
+import "./App.css";
-import produce from 'immer';
+import produce from "immer";
-import { useState } from 'react';
+import { useState } from "react";
-
-
-
-
-
-
- 
 
 /*const Notes = props => props.data.map(note => <div>{note.text}</div>);
   const initialData = [{ text: 'Hey' }, { text: 'There' }];
@@ -36,9 +29,9 @@ import { useState } from 'react';
 function App() {
 	const [input, setInput] = useState("");
 	const [list, setList] = useState([]);
-    const [visible, setVisible] = useState(true);
+
 	const addToList = e => {
-    setList([ ...list,{ title: input, visible: true } ]);
+		setList([...list, { title: input, completed: false }]);
 		setInput("");
 	};
 
@@ -46,39 +39,51 @@ function App() {
 		setList(list.filter((item, index) => index !== id));
 	};
 
-  const hideMe = id => e => {
+	const toggleCompleted = id => e => {
-    setVisible(list.map((item, index) => index === id
+		setList(
+			list.map((item, index) =>
+				index === id
 					? {
 							title: item.title,
-        visible: false
+							completed: !item.completed,
 					  }
-      : item));
+					: item,
-  }
+			),
-
+		);
-  let style = { textDecoration: "none" };
+	};
-  if (!visible) style.textDecoration = "line-through";
-
 
 	return (
-     
 		<div className="App">
-      <input type="text" placeholder="First Name" onChange={e => setInput(e.target.value)} />
+			<input
-      <button type="button" onClick={addToList}>Submit</button>
+				type="text"
+				placeholder="First Name"
+				value={input}
+				onChange={e => setInput(e.target.value)}
+			/>
+			<button type="button" onClick={addToList}>
+				Submit
+			</button>
 			<ul>
-    {list.map((item,index) =>
+				{list.map((item, index) => (
-  <li key={item} >
+					<li
-    {item}
+						key={item.title}
-    <button type="button" onClick={deleteList(index)}>Delete</button>
+						style={
-    <button type="button"  onClick={hideMe(index)}> Completed</button>
+							item.completed
-    </li> )}     
+								? { textDecoration: "line-through" }
+								: {}
+						}>
+						{item.title}
+						<button type="button" onClick={deleteList(index)}>
+							Delete
+						</button>
+						<button type="button" onClick={toggleCompleted(index)}>
+							{!item.completed ? "Completed" : "Not completed"}
+						</button>
+					</li>
+				))}
 			</ul>
-    
-
 		</div>
 	);
 }
 
-  
-  
-  
 export default App;