11. Tablica s ažuriranjem - kristijan-perkovic96/Osnove-reacta GitHub Wiki

U realnom svijetu često moramo prikazati veliki skup podataka. Uobičajeno je takav skup podataka prikazati pomoću tablice, ali također treba omogućiti njihovo ažuriranje. Pojedinci kreiraju forme koje služe za kreiranje, dok pojedinci omoguće ažuriranje unutar same tablice. U ovome poglavlju ćemo pokazati na koji način se kreira tablica unutar koje imamo prikaz podataka te se unutar ćelije može napraviti izmjena vrijednosti.

Prvo ćemo u state definirati podatke koji će se prikazivati. Za ovaj primjer su podaci harkodirani iako možete skup podataka dohvatiti s API-a. Koristi se funkcijska komponenta te za to koristimo hook useState. U return ćemo definirati osnovni izgled tablice pomoću html elemanate.

Nakon toga ćemo kreirati komponentu Row unutar koje ćemo definirati state koji se sastoji od svih svojstava pojedinog objeka iz skupa podataka. To nam je potrebno kako bismo mogli spremiti promijene te input-ima pridjeliti value i metodu koja obrađuje izmjene. Također imamo gumb koji poziva metodu za update koja je prosljeđena iz komponente Table. U komponenti Table u metodi update ukoliko koristite API možete pozvati metodu za ažuriranje te ponovni dohvat podataka.

File css:

Prikaz tablice:

Ukoliko pritisnete u ćeliju primijetit ćete da vam se pojavio border od inputa te da možete unijeti promjenu. Naravno kada pritisnete ažuriraj nećete vidjeti nikakve izmjene na ekranu te iz toga razloga imate gumb "Ispiši trenutne podatke u konzolu" te možete u konzoli pogledati da su se podaci uistinu promijenili.