changes for completed

src/App.js

@@ -36,9 +36,9 @@ import { useState } from 'react';
 function App() {
     const [input, setInput] = useState("");
     const [list, setList] = useState([]);
-    const [visible, setVisible] = useState(null);
+    const [visible, setVisible] = useState(true);
   const addToList = e => {
-    setList([ ...list, input ]);
+    setList([ ...list,{ title: input, visible: true } ]);
     setInput("");
   };
 
@@ -46,8 +46,13 @@ function App() {
     setList(list.filter((item, index) => index !== id));
   };
 
-  function hideMe(){
-    setVisible(false);
+  const hideMe = id => e => {
+    setVisible(list.map((item, index) => index === id
+      ? {
+        title: item.title,
+        visible: false
+      }
+      : item));
   }
 
   let style = { textDecoration: "none" };
@@ -61,10 +66,10 @@ function App() {
       <button type="button" onClick={addToList}>Submit</button>
     <ul>
     {list.map((item,index) =>
-  <li key={item} style={style}>
+  <li key={item} >
     {item}
     <button type="button" onClick={deleteList(index)}>Delete</button>
-    <button type="button"  onClick={hideMe}>Completed</button>
+    <button type="button"  onClick={hideMe(index)}> Completed</button>
     </li> )}     
     </ul>