kész

src/components/AruInfo.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 function AruInfo({ nev, mennyiseg, egyseg, megjegyzes }) {
   return (
-    <div style={{ marginBottom: "10px" }}>
+    <div>
       <h3>{nev}</h3>
       <p>Mennyiség: {mennyiseg} {egyseg}</p>
       <p>Megjegyzés: {megjegyzes}</p>

src/components/ListaElem.jsx

@@ -4,8 +4,8 @@ import MegveveGomb from "./MegveveGomb";
 
 function ListaElem({ aru }) {
   const { nev, mennyiseg, egyseg, megjegyzes, megveve } = aru;
-  const [megvasarolva, Megvasarolva] = useState(megveve);
+  const [megvasarolva, megvasarol] = useState(megveve);
-  const gomb = () => { Megvasarolva((prev) => !prev); };
+  const gomb = () => { megvasarol((prev) => !prev); };
 
   return (
     <div style={{ border: "1px solid #ccc", margin: "10px", padding: "10px", borderRadius: "15px" }}>

src/components/MegveveGomb.jsx

@@ -3,12 +3,10 @@ import '../App.css';
 
 function MegveveGomb({ onGomb, megVeve }) {
   return (
-    <button
+    <button className={`gomb ${megVeve ? "megvasarolva" : "beszerzendő"}`} onClick={onGomb}>
-      className={`gomb ${megVeve ? "megvasarolva" : "beszerzendő"}`} onClick={onGomb}
-    >
       {megVeve ? "Megvásárolva" : "Beszerzendő"}
     </button>
   );
 }
 
-export default MegveveGomb;
+export default MegveveGomb;