Helyi tárolás useEffect

src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
@@ -7,20 +7,36 @@ import HozzaAdasForm from './components/HozzaAdasForm';
 import Statisztika from './components/Statisztika';
 
 function App() {
-  const [venniKell, setVenniKell] = useState(
+  /* const [venniKell, setVenniKell] = useState(
    [
   { id: 1, nev: "Alma", mennyiseg: "2", egyseg: "kg", megjegyzes: "Ha van, akkor Idared", megveve: false },
   { id: 2, nev: "Fahéjas keksz", mennyiseg: "4", egyseg: "doboz", megjegyzes: "ha fahéjas nincs, akkor mandulás", megveve: false },
   { id: 3, nev: "Tej", mennyiseg: "3", egyseg: "liter", megjegyzes: "3,5 %-os", megveve: false },
   { id: 4, nev: "Gin", mennyiseg: "1", egyseg: "üveg", megjegyzes: "38 fokos", megveve: false },
    ]
-  );
+  ); */
+
+  //betöltés helyi tárolóból
+  const [venniKell, setVenniKell] = useState(() => {
+    const savedData = localStorage.getItem('bevasarlolista');
+    return savedData ? JSON.parse(savedData) : [
+  { id: 1, nev: "Alma", mennyiseg: "2", egyseg: "kg", megjegyzes: "Ha van, akkor Idared", megveve: false }]
+  })
+
+  useEffect(() => {
+        localStorage.setItem('bevasarlolista', JSON.stringify(venniKell));
+    }, [venniKell]); 
 
   const vetelKezeles = (id, ertek) => {
     const ujTomb = venniKell.map(aru => {return aru.id==id ? {...aru, megveve: ertek} : aru})
     setVenniKell(ujTomb)
   }
 
+  const elemModositas = (id, text) => {
+    const ujTomb = venniKell.map(aru => {return aru.id==id ? {...aru, nev: text} : aru})
+    setVenniKell(ujTomb)
+  }
+
   const hozzaAdas = (elem) => { 
     console.log(elem)
     setVenniKell([...venniKell, elem])
@@ -39,7 +55,8 @@ function App() {
       <h1>Bevásárlólista</h1>
       <Statisztika total={total} megvett={megvett}/>
       <HozzaAdasForm hozzaAd={hozzaAdas} />
-      <BevasarloLista aruk={venniKell} vetelk={vetelKezeles} torlesk={elemTorles} />
+      <BevasarloLista aruk={venniKell} vetelk={vetelKezeles}
+             torlesk={elemTorles} elemMod={elemModositas} />
     </>
   )
 }

src/components/AruInfo.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 
 const AruInfo = ({nev, mennyiseg, egyseg, megjegyzes}) => {
   return (
-    <div>
+    <>
         <h3>{nev} - {mennyiseg} {egyseg}</h3>
         <p>{megjegyzes}</p>
-    </div>
+    </>
   )
 }
 

src/components/BevasarloLista.jsx

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

src/components/ListaElem.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useActionState, useState } from 'react'
 import AruInfo from './AruInfo'
 import MegveveGomb from './MegveveGomb'
 import TorlesGomb from './TorlesGomb'
@@ -6,9 +6,10 @@ import TorlesGomb from './TorlesGomb'
 
 
 
-const ListaElem = ({aru, vetelk, torlesk}) => {
+const ListaElem = ({aru, vetelk, torlesk, elemMod}) => {
 
-  //const [megVetel, setMegvetel] = useState(false)
+  const [szerkesztve, setSzerkesztve] = useState(false)
+  const [szerkText, setSzerkText] = useState(aru.nev)
   
   const kezelVetel = () => {
     //setMegvetel(elozo => !elozo)
@@ -18,10 +19,34 @@ const ListaElem = ({aru, vetelk, torlesk}) => {
   const torlesKezel = () => { 
     torlesk(aru.id)  
    }
-  
+
+   const enterKezelo = (e) => {
+    if( e.key==='Enter') {
+      blurKezelo()
+    }
+   }
+
+   const blurKezelo = () => {
+      elemMod(aru.id, szerkText)
+      setSzerkesztve(false)
+   }
+   
   return (
     <div>
+      {szerkesztve ?
+        <input type='text'
+         value={szerkText}
+         onChange={(e) => setSzerkText(e.target.value)}
+         onKeyDown={enterKezelo}
+         onBlur={blurKezelo}
+         />
+      :
+      <>
         <AruInfo nev={aru.nev} mennyiseg={aru.mennyiseg} egyseg={aru.egyseg} megjegyzes={aru.megjegyzes} />
+         <button onClick={() => setSzerkesztve(true)} >Szerkesztés</button>
+      </>  
+      }  
+      
         <MegveveGomb onGomb={kezelVetel} megVeve={aru.megveve} />
         <TorlesGomb onGomb={torlesKezel} />
     </div>