🌟React list rendering

displaying content organized in an array of objects

Most of our React projects will involve:

• fetching an array of data from a source

• saving that data set into an array variable

• listing that array's elements on the user interface

The map() method

Think of a blog entries in a database. Using whatever fetch method, we would have all those blog entries put into a variable as array elements. To display the blog entries on the user interface, we would simply use JavaScript's built-in `map` function:

function App() {

    const someData = [ 
        "2025-01-01 : Happy New Year", 
        "2024-12-31 : 2024 in review", 
        "2024-12-30 : What did we learn this year?",
        "2024-12-29 : Looking ahead"
    ]
    
    return (
        <ul>
            { someData.map( (entry, index) => 
                <li key={`${entry}-${index}`}>{entry}</li> 
            )}
        </ul>
    )
    
}

To review, a mapfunction passes each element of an array as an argument. In the case above, each element of the someDataarray looks like the title of a blog entry. The mapfunction then returns the HTML-like JSX necessary to display a list item that shows the blog entry's title. It does this until it displays all the arrya's elements.

Also, let's take note of the keyproperty which helps React differentiate one list item from the others. The value makes use of the optional index variable from the map function, to give each list item its own unique identifier.

Conditional list rendering

Looking back at the conditional rendering methods, we can also display only part of the array based on conditions, e.g.:

function App() {

    const someData = [ 
        "2025-01-01 : Happy New Year", 
        "2024-12-31 : 2024 in review", 
        "2024-12-30 : What did we learn this year?",
        "2024-12-29 : Looking ahead"
    ]
    
    return (
        <ul>
            { someData.map( (entry, index) => 
                { entry.includes("2025") && 
                    <li key={`${entry}-${index}`}>{entry}</li> 
                }
            )}
        </ul>
    )
    
}

In the above example, only the entry titles with "2025" would be listed.

Therefore, we can do a lot of filtering when we couple map with conditional rendering!