Nos aproximadamente 5 anos em que trabalhei como desenvolvedor web, essas 3 funções de array são as que uso com mais frequência para gerenciar dados e interagir com arrays. Para o projeto React em si, essas 3 funções de array são muito poderosas para processamento de dados. Aqui estão usos mais ou menos eficazes dessas 3 funções.

Mapa para renderList

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    

{users.map((user, index) => (
• {user}
))}

Filtros para renderização condicional

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    

{filteredUsers.map((user, index) => (
• {user}
))}

Reduzir para computar dados

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 (
    

      
Total Price: ${totalPrice}
    
  );
}

export default TotalPrice;

Combinando mapa, filtro e redução no 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 (
    

      
Total Discount: ${totalDiscount}
      

        {discountedProducts.map(product => (
          
{product.name} - Discount: ${product.discount}
        ))}
      
    
  );
}

export default DiscountedProducts;

Conclusão

Em aplicativos React, mapear, filtrar e reduzir não são apenas ferramentas para manipular dados, mas também formas de renderizar a UI de forma dinâmica e eficiente. Ao compreender e dominar essas funções, podemos criar aplicações mais modulares, fáceis de ler e escaláveis. Portanto, continue explorando e implementando essas funções em nossos projetos React para obter resultados máximos