Depuis environ 5 ans que je travaille en tant que développeur Web, ces 3 fonctions de tableau sont celles que j'utilise le plus souvent pour gérer les données et interagir avec les tableaux. Pour le projet React lui-même, ces 3 fonctions array sont très puissantes pour le traitement des données, voici des utilisations plus ou moins efficaces de ces 3 fonctions.

Carte pour renderList

import React from 'react';

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

function UserList() {
  return (
    

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

Filtres pour le rendu conditionnel

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}
))}

Réduire pour calculer des données

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;

Combiner la carte, le filtre et la réduction dans 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;

Conclusion

Dans les applications React, mapper, filtrer et réduire ne sont pas seulement des outils de manipulation des données, mais également des moyens de restituer l'interface utilisateur de manière dynamique et efficace. En comprenant et maîtrisant ces fonctions, nous pouvons créer des applications plus modulaires, plus faciles à lire et évolutives. Alors continuez à explorer et à implémenter ces fonctions dans nos projets React pour un maximum de résultats