Looping in JSX React JS 2025

Looping in JSX React JS

In React, looping through data in JSX (JavaScript XML) can be achieved using JavaScript's array methods like `map()`, which allows you to iterate over an array and return JSX elements for each item. This makes it easy to render lists, tables, or any collection of items dynamically.

1. Using the `map()` Function for Looping

The most common way to loop through data in JSX is by using the `map()` method. This function is applied to an array and returns a new array, which is then rendered inside JSX. It's especially useful when you need to display lists of items dynamically.

        // Example of Looping in JSX using map()
        import React from 'react';

        const ItemList = () => {
            const items = ['Apple', 'Banana', 'Cherry'];

            return (
                

                    
Fruit List
                    

                        {items.map((item, index) => (
                            
{item}
                        ))}
                    
                
            );
        };

        export default ItemList;
    

2. Why Use `key` in Loops?

When rendering lists in React, it’s important to include a unique `key` prop for each element. The `key` helps React identify which items have changed, are added, or are removed, which helps with performance optimization when updating the UI.

        // Example of Key Prop in Loop
        import React from 'react';

        const ItemList = () => {
            const items = ['Apple', 'Banana', 'Cherry'];

            return (
                

                    
Fruit List
                    

                        {items.map((item, index) => (
                            
{item}
  {/* Using item as key */}
                        ))}
                    
                
            );
        };

        export default ItemList;
    

3. Looping with Objects

You can also loop through objects in JSX. This is done by using `Object.keys()`, `Object.values()`, or `Object.entries()`. These methods allow you to extract the keys, values, or both, and then map over them to render the data in JSX.

        // Looping through Object
        import React from 'react';

        const EmployeeList = () => {
            const employees = {
                john: 'John Doe',
                jane: 'Jane Smith',
                bob: 'Bob Johnson'
            };

            return (
                

                    
Employee List
                    

                        {Object.entries(employees).map(([key, value]) => (
                            
{value}
  {/* Using the key from Object.entries() */}
                        ))}
                    
                
            );
        };

        export default EmployeeList;
    

4. Looping Through Array of Objects

When working with an array of objects, you can loop over the array and access individual object properties. This is common when dealing with lists that contain multiple pieces of data for each item (e.g., name, price, image, etc.).

        // Looping through an Array of Objects
        import React from 'react';

        const ProductList = () => {
            const products = [
                { id: 1, name: 'Apple', price: '$1' },
                { id: 2, name: 'Banana', price: '$0.5' },
                { id: 3, name: 'Cherry', price: '$2' }
            ];

            return (
                

                    
Product List
                    

                        {products.map(product => (
                            

                                {product.name} - {product.price}
                            
                        ))}
                    
                
            );
        };

        export default ProductList;
    

5. Conditional Rendering Inside Loops

You can use conditional rendering inside a loop to display specific content based on certain conditions. This can be useful for showing different UI elements for different types of items.

        // Conditional Rendering Inside a Loop
        import React from 'react';

        const ProductList = () => {
            const products = [
                { id: 1, name: 'Apple', price: '$1', isAvailable: true },
                { id: 2, name: 'Banana', price: '$0.5', isAvailable: false },
                { id: 3, name: 'Cherry', price: '$2', isAvailable: true }
            ];

            return (
                

                    
Product List
                    

                        {products.map(product => (
                            

                                {product.name} - {product.price} 
                                {product.isAvailable ? (
                                    In Stock
                                ) : (
                                    Out of Stock
                                )}
                            
                        ))}
                    
                
            );
        };

        export default ProductList;
    

6. Looping with JSX Inside Conditional Statements

Sometimes, you need to apply loops conditionally. You can use `if` statements or ternary operators inside JSX to handle conditional loops.

        // Conditional Loop Example
        import React from 'react';

        const ProductList = () => {
            const products = [
                { id: 1, name: 'Apple', price: '$1' },
                { id: 2, name: 'Banana', price: '$0.5' }
            ];
            const hasProducts = products.length > 0;

            return (
                

                    
Product List
                    {hasProducts ? (
                        

                            {products.map(product => (
                                

                                    {product.name} - {product.price}
                                
                            ))}
                        
                    ) : (
                        
No products available
                    )}
                
            );
        };

        export default ProductList;
    

Conclusion

Looping in JSX allows React developers to easily render lists, tables, or other collections of data. The `map()` method is the most common tool for this task, and it enables dynamic rendering of content based on an array or object. With the ability to pass data conditionally and render UI based on props, looping in JSX is a powerful feature for building dynamic React apps.