add lesson-52

src/components/List/List.tsx

@@ -3,9 +3,10 @@ import './List.scss'
 type TProps = {
     list: string[]
     title: string
+    onDelete?: (item: string) => void
 }
 
-const List = ({list, title}: TProps) => {
+const List = ({list, title, onDelete}: TProps) => {
     return (
     <div className='List'>
         <h2>{title}</h2>
@@ -13,7 +14,7 @@ const List = ({list, title}: TProps) => {
         <div>
             {
                 list.map((item, index) => (
-                    <p key={index}>
+                    <p key={index} onClick={() => onDelete && onDelete(item)}>
                         {item}
                     </p>
                 ))

src/containers/App.tsx

@@ -30,7 +30,7 @@ function App() {
   }
 
   const onClickHandler = () => {
-    const copyGuestList = guestList
+    const copyGuestList = [...guestList]
     const randomList = copyGuestList.filter(item => {
       const random = Math.floor(Math.random() * 100)
       if(random > 50) return item
@@ -39,6 +39,13 @@ function App() {
     setIncomeList(randomList)
   }
 
+  const onDeleteHandler = (item: string) => {
+    const index = guestList.findIndex(str => str === item)
+    const copyGuestList = [...guestList]
+    copyGuestList.splice(index, 1)
+    setGuestList(copyGuestList)
+  }
+
   return (
     <div className="App">
       <Modal show={isModal}/>
@@ -46,10 +53,11 @@ function App() {
         <List 
           title="Список основных гостей"
           list={guestList.reverse()}
+          onDelete={onDeleteHandler}
         />
         <List 
           title="Список приглашенных гостей"
-          list={inComeList}  
+          list={inComeList}
         />
       </div>