hrllo

src/containers/App.tsx

-import {useState} from "react"
-import List from "../components/List/List"
-import SendBtn from "../components/SendBtn/SendBtn"
-import GuestForm from "../components/GuestForm/GuestForm"
+import {useRef, useState} from 'react'
 import './App.scss'
-import Modal from "../components/Modal/Modal"
 
 function App() {
-  const [guestList, setGuestList] = useState<string[]>(['John', 'Alibek', 'Tramp', 'Jose', 'Aida'])
-  const [inComeList, setIncomeList] = useState<string[]>([])
-  const [inpVal, setInpVal] = useState<string>('')
-  const [isModal, setIsModal] = useState<boolean>(false)
-
-  const onChangeHandler = (e: React.FormEvent<HTMLInputElement>) => {
-    setInpVal(e.currentTarget.value)
-    setIsModal(false)
+  const [playList, setPlayList] = useState([
+    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
+    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
+    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
+    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
+    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'}
+  ])
+
+  const auidoRef = useRef<HTMLAudioElement | null>(null)
+
+  const playHandler = () => {
+    auidoRef?.current?.play()
   }
 
-  const onSubmitHandler = (e: React.SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    if(inpVal === '') {
-      setIsModal(true)
-    } else {
-      setGuestList((prevState) => {
-        prevState.push(inpVal)
-        return prevState
-      })
-    }
+  const pauseHandler = () => {
+    auidoRef?.current?.pause()
   }
 
-  const onClickHandler = () => {
-    const copyGuestList = [...guestList]
-    const randomList = copyGuestList.filter(item => {
-      const random = Math.floor(Math.random() * 100)
-      if(random > 50) return item
-    })
-
-    setIncomeList(randomList)
-  }
+  console.log(auidoRef);
   
-  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}/>
-      <div className="Lists">
-        <List 
-          title="Список основных гостей"
-          list={guestList.reverse()}
-          onDelete={onDeleteHandler}
-        />
-        <List 
-          title="Список приглашенных гостей"
-          list={inComeList}
-        />
-      </div>
 
-      <div className="Controllers">
-        <GuestForm
-          onChange={onChangeHandler}
-          onSubmit={onSubmitHandler}
-          value={inpVal}
-        />
-        <SendBtn onClick={onClickHandler}/>
+      <div style={{height: '10px', width: '40px', backgroundColor: 'white'}}>
+        
       </div>
+
+      <button onClick={playHandler}>Play</button>
+      <button onClick={pauseHandler}>Pause</button>
+
+      <audio controls style={{display: 'none'}} ref={auidoRef}>
+        <source src={playList[4].name} type="audio/mpeg" />
+      </audio>
     </div>
   )
 }