Dynamic Lists and Conditional Rendering

Part 1: Rendering Dynamic Lists

In modern web applications, you rarely hardcode lists of content. Instead, you work with dynamic data, typically in the form of a JavaScript array of objects. Your task is to transform that data into a list of UI elements.

The primary tool for this job in JavaScript is the Array.prototype.map() method, which you've used before. In React, we use it to transform an array of data into an array of JSX elements.

Let's see the basic pattern. Imagine you have an array of strings:

const fruits = ['Apple', 'Orange', 'Banana'];

To render this as a list in React, you would map over the array inside your JSX, returning a <li> for each item:

function FruitList() {
  const fruits = ['Apple', 'Orange', 'Banana'];

  const listItems = fruits.map(fruit => <li>{fruit}</li>);

  return <ul>{listItems}</ul>;
}

Notice how we embed the listItems array directly into the <ul>. React is smart enough to render each element in the array sequentially.

The All-Important key Prop

If you run the code from the video, you'll notice a warning in your browser's console: Warning: Each child in a list should have a unique "key" prop.

This is one of the most important rules in React. When you render a list, you must provide a special prop called key to each element in the array.

Why is key necessary?
React uses the key to identify which items have changed, been added, or been removed. Think of it like a primary key in a database table. It gives each element a stable identity. Without keys, React has to work much harder to figure out what changed, which can lead to performance problems and bugs, especially with dynamic lists where items can be reordered, added, or deleted.

Where do you get keys?

• From your data: The best key is a unique string or number that already exists in your data, like a user ID, a product SKU, or a database primary key.
• Locally generated: If your data doesn't have a unique ID, you can add one when you create it (e.g., using crypto.randomUUID()).

A common mistake is to use the array index as a key (data.map((item, index) => <li key={index}>...</li>)). Avoid this. If the array is re-ordered, the indices change, which defeats the purpose of the key and can lead to bugs.

Now let's see how to correctly render a list of objects with proper keys.

const users = [
  { id: 'a4fde', name: 'Alice', email: 'alice@example.com' },
  { id: 'b8d9c', name: 'Bob', email: 'bob@example.com' },
  { id: 'c2a1e', name: 'Charlie', email: 'charlie@example.com' }
];

function UserList() {
  const users = [
    { id: 'a4fde', name: 'Alice', email: 'alice@example.com' },
    { id: 'b8d9c', name: 'Bob', email: 'bob@example.com' },
    { id: 'c2a1e', name: 'Charlie', email: 'charlie@example.com' }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <strong>{user.name}</strong> ({user.email})
        </li>
      ))}
    </ul>
  );
}

Part 2: Conditional Rendering

Your components won't always render the same thing. They need to adapt to changing data and state. For example:

• Show a "Loading..." message while fetching data.
• Display an error if an API call fails.
• Render a list of "In Stock" items from a larger product list.
• Show a user's profile page if they are logged in, or a login form if they are not.

React doesn't have special syntax for this; you just use standard JavaScript. Let's explore the most common patterns.

Pattern 1: Filtering Lists Before Rendering

A very common form of conditional rendering is to display a subset of a list. You can achieve this by chaining Array.prototype.filter() before you map(). This is a clean, declarative approach.

data.filter(condition).map(item => <Component.../>)

Pattern 2: Ternary Operator (? :)

For simple "if-this-then-that" logic directly inside your JSX, the ternary operator is perfect.

{condition ? <A /> : <B />}

This is extremely useful for toggling between two states, like a loading spinner and the final content.

function DataFetcher() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // useEffect to fetch data would go here...

  return (
    <div>
      {isLoading ? <p>Loading...</p> : <ul>{/* Render data here */}</ul>}
    </div>
  );
}

Pattern 3: Logical AND Operator (&&)

If you want to render something only when a condition is true (and render nothing otherwise), the logical AND && operator is a concise shortcut.

{condition && <A />}

This works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false. React doesn't render false, null, or undefined, so the component simply disappears.

function Notifications({ messages }) {
  return (
    <div>
      {messages.length > 0 && <h2>You have {messages.length} unread messages.</h2>}
      {/* ... list of messages ... */}
    </div>
  );
}

Important Pitfall: Do not use a number as the condition. 0 && <Component /> will not render nothing; it will render the number 0 on your page! Always use a boolean expression like messages.length > 0.

Pattern 4: if/else Statements with Variables

When your logic is too complex for a ternary or &&, fall back to a standard if/else statement. You can declare a let variable and conditionally assign JSX to it before the return statement.

function LoginButton() {
  const isLoggedIn = false; // This would come from state or props

  let content;
  if (isLoggedIn) {
    content = <button>Log Out</button>;
  } else {
    content = <button>Log In</button>;
  }

  return <div>{content}</div>;
}

This approach is the most verbose but also the most flexible and often the easiest to read for complex scenarios.

Conclusion

You've just learned two of the most essential skills for building user interfaces in React. Being able to dynamically generate UI from data and conditionally show or hide parts of that UI is fundamental to creating interactive applications.

Key Takeaways:

• Use Array.prototype.map() to transform an array of data into an array of JSX elements.
• Always provide a unique and stable key prop for each element in a list to help React track items efficiently. The best key comes from your data (e.g., an id).
• Use Array.prototype.filter() before map() to conditionally render a subset of a list.
• For general conditional rendering in JSX:
  • Use the ternary operator (? :) for simple if/else choices.
  • Use the logical AND operator (&&) to render something only if a condition is true.
  • Use standard if/else statements with a variable for more complex logic.

In our next lesson, we'll focus on creating controlled components to manage and validate form inputs. You'll see how today's skills are directly applicable, as you'll be conditionally rendering validation errors and updating lists of results based on what the user types.