React — Lists

Basic List Rendering

function NumberList({ numbers }) {
    return (
        <ul>
            {numbers.map(number => (
                <li key={number}>{number}</li>
            ))}
        </ul>
    );
}

// Usage
<NumberList numbers={[1, 2, 3, 4, 5]} />

List with Keys

function TodoList({ todos }) {
    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>
    );
}

List with Components

function TodoItem({ todo }) {
    return <li>{todo.text}</li>;
}

function TodoList({ todos }) {
    return (
        <ul>
            {todos.map(todo => (
                <TodoItem key={todo.id} todo={todo} />
            ))}
        </ul>
    );
}

Filtering Lists

function ActiveTodos({ todos }) {
    const activeTodos = todos.filter(todo => !todo.completed);

    return (
        <ul>
            {activeTodos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>
    );
}

List Examples

// User list
function UserList({ users }) {
    return (
        <div className="user-list">
            {users.map(user => (
                <div key={user.id} className="user-card">
                    <img src={user.avatar} alt={user.name} />
                    <h3>{user.name}</h3>
                    <p>{user.email}</p>
                </div>
            ))}
        </div>
    );
}

// Product list with filtering
function ProductList({ products, category }) {
    const filteredProducts = category
        ? products.filter(p => p.category === category)
        : products;

    return (
        <div className="product-grid">
            {filteredProducts.map(product => (
                <div key={product.id} className="product-card">
                    <img src={product.image} alt={product.name} />
                    <h3>{product.name}</h3>
                    <p>${product.price}</p>
                </div>
            ))}
        </div>
    );
}

// Nested list
function CommentList({ comments }) {
    return (
        <ul>
            {comments.map(comment => (
                <li key={comment.id}>
                    <strong>{comment.author}</strong>
                    <p>{comment.text}</p>
                    {comment.replies && (
                        <ul>
                            {comment.replies.map(reply => (
                                <li key={reply.id}>
                                    <strong>{reply.author}</strong>
                                    <p>{reply.text}</p>
                                </li>
                            ))}
                        </ul>
                    )}
                </li>
            ))}
        </ul>
    );
}

Mini Practice

Write React code that:

1. Renders a simple list
2. Uses keys properly
3. Filters a list
4. Creates a nested list

Up Next

Next: Learn about Forms.