completed changes

src/App.js

@@ -4,7 +4,13 @@ import './App.css';
 import produce from 'immer';
 import { useState } from 'react';
 
-function App() {
+
+
+
+
+
+ 
+
   /*const Notes = props => props.data.map(note => <div>{note.text}</div>);
   const initialData = [{ text: 'Hey' }, { text: 'There' }];
   const [data, setData] = useState(initialData);
@@ -27,23 +33,47 @@ function App() {
     </div>
   );
 }*/
+function App() {
+    const [input, setInput] = useState("");
+    const [list, setList] = useState([]);
+    const [visible, setVisible] = useState(null);
+  const addToList = e => {
+    setList([ ...list, input ]);
+    setInput("");
+  };
+
+  const deleteList = id => e => {
+    setList(list.filter((item, index) => index !== id));
+  };
+
+  function hideMe(){
+    setVisible(false);
+  }
+
+  let style = { textDecoration: "none" };
+  if (!visible) style.textDecoration = "line-through";
 
-const [input, setInput] = useState("");
-const [list, setList] = useState([]);
 
-const addToList = e => {
-  setList([ ...list, input ]);
-  setInput("");
-};
     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 => <li key={item}>{item}</li>)}
+    {list.map((item,index) =>
+  <li key={item} style={style}>
+    {item}
+    <button type="button" onClick={deleteList(index)}>Delete</button>
+    <button type="button"  onClick={hideMe}>Completed</button>
+    </li> )}     
     </ul>
+    
+
   </div>
       );
     }
   
+  
+  
+  
 export default App;