Bővítés a 4. feladatig megvan.

src/App.jsx

@@ -3,6 +3,8 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 import BevasarloLista from './components/BevasarloLista';
+import HozzaAdasForm from './components/HozzaAdasForm';
+import Statisztika from './components/Statisztika';
 
 function App() {
   const [venniKell, setVenniKell] = useState(
@@ -15,14 +17,29 @@ function App() {
   );
 
   const vetelKezeles = (id, ertek) => {
-    const ujTomb = venniKell.map(aru => {aru.id==id ? {...aru, megveve: ertek} : aru})
+    const ujTomb = venniKell.map(aru => {return aru.id==id ? {...aru, megveve: ertek} : aru})
     setVenniKell(ujTomb)
   }
 
+  const hozzaAdas = (elem) => { 
+    console.log(elem)
+    setVenniKell([...venniKell, elem])
+   }
+
+   const elemTorles = (id) => { 
+    const ujTomb = venniKell.filter(aru=>aru.id!=id)
+    setVenniKell(ujTomb)
+   }
+
+   const total = venniKell.length
+   const megvett = venniKell.filter(a => a.megveve).length
+
   return (
     <>
       <h1>Bevásárlólista</h1>
-      <BevasarloLista aruk={venniKell} vetelk={vetelKezeles} />
+      <Statisztika total={total} megvett={megvett}/>
+      <HozzaAdasForm hozzaAd={hozzaAdas} />
+      <BevasarloLista aruk={venniKell} vetelk={vetelKezeles} torlesk={elemTorles} />
     </>
   )
 }

src/components/BevasarloLista.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ListaElem from './ListaElem'
 
-const BevasarloLista = ({aruk, vetelk}) => {
+const BevasarloLista = ({aruk, vetelk, torlesk}) => {
   return (
     <div>
         {aruk.map((elem,index) => {
             //console.log(elem.megveve)
             return (
-                <ListaElem key={index} aru={elem} vetelk={vetelk}/>
+                <ListaElem key={index} aru={elem} vetelk={vetelk} torlesk={torlesk}/>
             )
             })
         }

src/components/HozzaAdasForm.jsx

@@ -0,0 +1,30 @@
+import React, {useState} from 'react'
+
+const HozzaAdasForm = ({hozzaAd}) => {
+
+    const [nev, setNev] = useState("")
+    const [mennyiseg, setMennyiseg] = useState("")
+    const [egyseg, setEgyseg] = useState("")
+
+    const hozzaAdKezel = (e) => { 
+        if (nev==="") return
+        e.preventDefault()
+        hozzaAd({nev,mennyiseg,egyseg,megjegyzes: "",megveve: false, id: Date.now()}) 
+        setNev("")
+        setMennyiseg("")
+        setEgyseg("")   
+    }
+
+  return (
+    <div>
+        <form onSubmit={hozzaAdKezel}>
+            <input type="text" value={nev} onChange={(e) => setNev(e.target.value)} placeholder="Név" />
+            <input type="text" value={mennyiseg} onChange={(e) => setMennyiseg(e.target.value)} placeholder="Mennyiség" />
+            <input type="text" value={egyseg} onChange={(e) => setEgyseg(e.target.value)} placeholder="Egység" />
+            <input type="submit" value="Hozzáad" />
+        </form>
+    </div>
+  )
+}
+
+export default HozzaAdasForm

src/components/ListaElem.jsx

@@ -1,23 +1,29 @@
 import React, { useState } from 'react'
 import AruInfo from './AruInfo'
 import MegveveGomb from './MegveveGomb'
+import TorlesGomb from './TorlesGomb'
 
 
 
-const ListaElem = ({aru, vetelk}) => {
 
-  const [megVetel, setMegvetel] = useState(false)
+const ListaElem = ({aru, vetelk, torlesk}) => {
+
+  //const [megVetel, setMegvetel] = useState(false)
   
   const kezelVetel = () => {
-    setMegvetel(elozo => !elozo)
-    vetelk(aru.id, megVetel)
+    //setMegvetel(elozo => !elozo)
+    vetelk(aru.id, !aru.megveve)
   }
 
+  const torlesKezel = () => { 
+    torlesk(aru.id)  
+   }
   
   return (
     <div>
         <AruInfo nev={aru.nev} mennyiseg={aru.mennyiseg} egyseg={aru.egyseg} megjegyzes={aru.megjegyzes} />
-        <MegveveGomb onGomb={kezelVetel} megVeve={megVetel} />
+        <MegveveGomb onGomb={kezelVetel} megVeve={aru.megveve} />
+        <TorlesGomb onGomb={torlesKezel} />
     </div>
   )
 }

src/components/MegveveGomb.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 const MegveveGomb = ({onGomb, megVeve}) => {
   return (
-    <div>
+    <>
         <button onClick={onGomb} style={{ backgroundColor: megVeve ? "green" : "red"}}>
             {megVeve ? "Megvásárolva" : "Beszerzendő"}
         </button>
-    </div>
+    </>
   )
 }
 

src/components/Statisztika.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Statisztika = ({total, megvett}) => {
+
+   const megvenni = total-megvett; 
+
+  return (
+    <div>
+        <table>
+            <tbody>
+            <tr>
+                <th>Összesen:</th>
+                <td>{total}</td>
+            </tr>
+            <tr>
+                <th>Megvett:</th>
+                <td>{megvett}</td>
+            </tr>
+            <tr>
+                <th>Beszerzendő:</th>
+                <td>{megvenni}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+  )
+}
+
+export default Statisztika

src/components/TorlesGomb.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const TorlesGomb = ({onGomb}) => {
+  return (
+    <>
+        <button onClick={onGomb} style={{ backgroundColor: "blue", color: "white"}}>
+            Törlés
+        </button>
+    </>
+  )
+}
+
+export default TorlesGomb