Tips Frontend Development

Improve skills to be 1% better

5 Contoh Penggunaan UseState

5 Contoh Penggunaan UseState

Dalam React, useState adalah salah satu hook yang paling sering digunakan untuk mengelola state dalam komponen fungsional. Dengan useState, kita dapat menyimpan dan memperbarui nilai tanpa perlu menggunakan class component. Berikut adalah lima contoh penggunaan useState dalam berbagai situasi!1. Mengelola Input FormSaat membuat form, kita sering kali perlu menyimpan nilai input. Dengan useState, kita dapat memperbarui nilai input dengan mudah.import { useState } from "react"; function InputForm() { const [name, setName] = useState(""); return ( <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Masukkan nama" /> ); }2. Membuat Toggle Mode (Dark/Light Mode)Kita bisa menggunakan useState untuk mengubah tema aplikasi dengan satu klik.import { useState } from "react"; function ThemeToggle() { const [darkMode, setDarkMode] = useState(false); return ( <button onClick={() => setDarkMode(!darkMode)}> {darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"} </button> ); }3. Menghitung Klik (Counter)Salah satu contoh paling dasar dari useState adalah membuat penghitung sederhana.import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); }4. Menampilkan atau Menyembunyikan ElemenKita dapat menggunakan useState untuk menampilkan atau menyembunyikan elemen dengan mudah.import { useState } from "react"; function ShowHideText() { const [visible, setVisible] = useState(false); return ( <div> <button onClick={() => setVisible(!visible)}> {visible ? "Sembunyikan" : "Tampilkan"} Teks </button> {visible && <p>Ini adalah teks yang bisa disembunyikan.</p>} </div> ); }5. Mengelola Daftar Item (Todo List)useState juga bisa digunakan untuk mengelola daftar item seperti todo list.import { useState } from "react"; function TodoList() { const [todos, setTodos] = useState([]); const [task, setTask] = useState(""); const addTask = () => { setTodos([...todos, task]); setTask(""); }; return ( <div> <input type="text" value={task} onChange={(e) => setTask(e.target.value)} /> <button onClick={addTask}>Tambah</button> <ul> {todos.map((todo, index) => ( <li key={index}>{todo}</li> ))} </ul> </div> ); }KesimpulanHook useState sangat fleksibel dan dapat digunakan dalam berbagai skenario. Dari mengelola input form hingga mengelola daftar item dalam aplikasi, useState memungkinkan kita untuk mengontrol state dengan mudah dalam komponen fungsional React.Coba implementasikan useState dalam proyek React kamu dan rasakan kemudahannya! 🚀

Tutorial React JS Pemula: Belajar UseState Dan UseEffect Hooks Pada Web Point Of Sales

Tutorial React JS Pemula: Belajar UseState Dan UseEffect Hooks Pada Web Point Of Sales

React JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna yang interaktif dan dinamis. Dalam pengembangan aplikasi seperti Web Point of Sales (POS), kita sering kali memerlukan state management dan efek samping yang dapat ditangani dengan dua hooks utama di React, yaitu useState dan useEffect.1. Mengenal useStateuseState adalah hook yang digunakan untuk mengelola state lokal dalam komponen React. Pada aplikasi POS, kita bisa menggunakannya untuk menyimpan data seperti daftar produk, jumlah item dalam keranjang, atau total harga.Contoh penggunaan useStateimport React, { useState } from 'react'; function POSApp() { const [cart, setCart] = useState([]); const [total, setTotal] = useState(0); const addItemToCart = (item) => { setCart([...cart, item]); setTotal(total + item.price); }; return ( <div> <h2>Total: ${total}</h2> <button onClick={() => addItemToCart({ name: 'Product A', price: 50 })}> Tambah Produk A </button> </div> ); } export default POSApp;Penjelasan:useState([]): Menginisialisasi state cart sebagai array kosong.useState(0): Menginisialisasi state total dengan nilai 0.setCart([...cart, item]): Menambahkan item baru ke dalam cart.setTotal(total + item.price): Mengupdate total harga saat item ditambahkan.2. Mengenal useEffectuseEffect digunakan untuk menangani efek samping seperti fetching data, mengelola event listener, atau menyimpan data ke local storage. Dalam aplikasi POS, kita dapat menggunakannya untuk menyimpan daftar belanja ke local storage atau melakukan fetching produk dari API.Contoh penggunaan useEffectimport React, { useState, useEffect } from 'react'; function POSApp() { const [products, setProducts] = useState([]); useEffect(() => { fetch('https://api.example.com/products') .then(response => response.json()) .then(data => setProducts(data)); }, []); // Empty dependency array means this runs once on mount return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product, index) => ( <li key={index}>{product.name} - ${product.price}</li> ))} </ul> </div> ); } export default POSApp;Penjelasan:useEffect(() => {...}, []): Efek hanya dijalankan saat komponen pertama kali dimuat.fetch('https://api.example.com/products'): Mengambil daftar produk dari API.setProducts(data): Menyimpan data produk ke dalam state.3. Menggabungkan useState dan useEffectDalam aplikasi POS yang lebih kompleks, kita bisa menggabungkan useState dan useEffect untuk mengelola daftar belanjaan dan menyimpannya ke local storage.Contoh penerapanimport React, { useState, useEffect } from 'react'; function POSApp() { const [cart, setCart] = useState([]); useEffect(() => { const savedCart = localStorage.getItem('cart'); if (savedCart) { setCart(JSON.parse(savedCart)); } }, []); useEffect(() => { localStorage.setItem('cart', JSON.stringify(cart)); }, [cart]); const addItemToCart = (item) => { setCart([...cart, item]); }; return ( <div> <h2>Keranjang Belanja</h2> <button onClick={() => addItemToCart({ name: 'Product A', price: 50 })}> Tambah Produk A </button> <ul> {cart.map((item, index) => ( <li key={index}>{item.name} - ${item.price}</li> ))} </ul> </div> ); } export default POSApp;Penjelasan:Saat pertama kali aplikasi dijalankan, useEffect akan membaca daftar belanja dari localStorage.Setiap kali cart berubah, daftar belanja akan disimpan kembali ke localStorage.Dengan cara ini, data keranjang belanja tetap tersimpan meskipun pengguna menutup browser.KesimpulanDalam tutorial ini, kita telah mempelajari bagaimana useState dan useEffect dapat digunakan dalam Web Point of Sales untuk mengelola data dan efek samping. useState sangat berguna untuk menyimpan status seperti daftar belanja dan total harga, sedangkan useEffect digunakan untuk menangani proses seperti fetching data dan menyimpan informasi ke local storage.Mulailah bereksperimen dengan React Hooks ini dalam proyek POS Anda dan tingkatkan efisiensi dalam membangun aplikasi interaktif! 🚀