[feat] mark as completed

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

src/App.js

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