Selama kurang lebih 5 tahun saya bekerja sebagai web developer, 3 fungsi array ini adalah yang paling sering saya gunakan untuk mengelola data dan berinteraksi dengan array. untuk react project sendiri 3 fungsi array ini sangatlah powerfull untuk pengolahan data, berikut kurang lebih penggunaan yang efektif dari ke 3 fungsi tersebut.
Map untuk renderList
import React from 'react'; const users = ['Alice', 'Bob', 'Charlie']; function UserList() { return ( <ul> {users.map((user, index) => ( <li key={index}>{user}</li> ))} </ul> ); } export default UserList; Filter untuk kondisional rendering
import React from 'react'; const users = ['Al', 'Bob', 'Charlie']; function UserList() { const filteredUsers = users.filter(user => user.length > 3); return ( <ul> {filteredUsers.map((user, index) => ( <li key={index}>{user}</li> ))} </ul> ); } export default UserList; Reduce untuk Menghitung Data
import React from 'react'; const products = [ { id: 1, name: 'Laptop', price: 1500 }, { id: 2, name: 'Phone', price: 800 }, { id: 3, name: 'Tablet', price: 1200 } ]; function TotalPrice() { const totalPrice = products.reduce((acc, product) => acc + product.price, 0); return ( <div> <h2>Total Price: ${totalPrice}</h2> </div> ); } export default TotalPrice; Menggabungkan map, filter, dan reduce dalam React
import React from 'react'; const products = [ { id: 1, name: 'Laptop', price: 1500, discount: 200 }, { id: 2, name: 'Phone', price: 800, discount: 50 }, { id: 3, name: 'Tablet', price: 1200, discount: 100 } ]; function DiscountedProducts() { const discountedProducts = products.filter(product => product.discount > 0); const totalDiscount = discountedProducts.reduce((acc, product) => acc + product.discount, 0); return ( <div> <h2>Total Discount: ${totalDiscount}</h2> <ul> {discountedProducts.map(product => ( <li key={product.id}>{product.name} - Discount: ${product.discount}</li> ))} </ul> </div> ); } export default DiscountedProducts; Kesimpulan
Dalam aplikasi React, map, filter, dan reduce bukan hanya alat untuk memanipulasi data, tetapi juga cara untuk merender UI secara dinamis dan efisien. Dengan memahami dan menguasai fungsi-fungsi ini, kita bisa membuat aplikasi yang lebih modular, mudah dibaca, dan scalable. Jadi, terus eksplorasi dan terapkan fungsi-fungsi ini dalam proyek React kita untuk hasil yang maksimal
Top comments (0)