[feat] mark as completed

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

src/App.js

@@ -1,17 +1,10 @@
-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 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 [input, setInput] = useState("");
-    const [list, setList] = useState([]);
+	const [list, setList] = useState([]);
-    const [visible, setVisible] = useState(true);
+
-  const addToList = e => {
+	const addToList = e => {
-    setList([ ...list,{ title: input, visible: true } ]);
+		setList([...list, { title: input, completed: false }]);
-    setInput("");
+		setInput("");
-  };
+	};
-
+
-  const deleteList = id => e => {
+	const deleteList = id => e => {
-    setList(list.filter((item, index) => index !== id));
+		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) =>
-        title: item.title,
+				index === id
-        visible: false
+					? {
-      }
+							title: item.title,
-      : item));
+							completed: !item.completed,
-  }
+					  }
-
+					: item,
-  let style = { textDecoration: "none" };
+			),
-  if (!visible) style.textDecoration = "line-through";
+		);
-
+	};
-
+
-    return(
+	return (
-     
+		<div className="App">
-      <div className="App">
+			<input
-      <input type="text" placeholder="First Name" onChange={e => setInput(e.target.value)} />
+				type="text"
-      <button type="button" onClick={addToList}>Submit</button>
+				placeholder="First Name"
-    <ul>
+				value={input}
-    {list.map((item,index) =>
+				onChange={e => setInput(e.target.value)}
-  <li key={item} >
+			/>
-    {item}
+			<button type="button" onClick={addToList}>
-    <button type="button" onClick={deleteList(index)}>Delete</button>
+				Submit
-    <button type="button"  onClick={hideMe(index)}> Completed</button>
+			</button>
-    </li> )}     
+			<ul>
-    </ul>
+				{list.map((item, index) => (
-    
+					<li
-
+						key={item.title}
-  </div>
+						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>
+	);
+}
 
 export default App;