Day 3 of #100DaysOfCode — Understanding List Rendering and Conditional Rendering in React

Source: Dev.to

List Rendering in React

List rendering is the process of displaying a collection of data—such as products, user details, messages, or menu items—dynamically in your UI. In React, this is typically done using the map() function.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

return (
  

    {users.map(user => (
      - {user.name}

    ))}
  

);

Why key is important

Each element in a rendered list needs a unique key. The key helps React:

• Distinguish between elements.
• Efficiently update or remove elements without re‑rendering the entire list.

Pro tip: The key should be unique and stable. Good examples include id, employee numbers, or any value that doesn’t change over time. Avoid using the array index as a key unless your list is static and won’t change.

Using map() is the React‑friendly approach. While for loops can technically render lists, they’re often more complex and less readable.

Conditional Rendering in React

Conditional rendering allows you to show or hide elements based on certain conditions. This is especially useful for user interfaces that change dynamically.

Example: Showing a dashboard or a login/signup page based on the user’s authentication state:

function AuthPage({ isLoggedIn }) {
  return (
    
      {isLoggedIn ?  : }
    
  );
}

You can apply conditions to:

• Individual elements.
• Entire pages or components.

Use cases include:

• Displaying a login/signup page only for users who are not logged in.
• Showing error messages or success notifications.
• Toggling UI features based on user roles or permissions.

Conditional rendering ensures your UI is dynamic, responsive, and user‑focused.

Key Takeaways

• List rendering uses map() to transform arrays into JSX elements.
• Always provide a unique key for each list item to help React track changes efficiently.
• Conditional rendering controls what is displayed based on conditions, making your UI adaptable.
• Combining both techniques makes your React apps scalable and maintainable.