Conditional Rendering & Lists (Keys)

Q: How do you show different content in React depending on a condition?

You can use a regular JavaScript if statement before the return, a ternary expression directly inside JSX, or the double ampersand operator when you only want to show something in one specific case and nothing otherwise.

Q: How do you render a list of items in React using the map function?

You use the array's map method to turn each item in a list into a piece of JSX, and each resulting element needs a unique key prop so React can keep track of which item is which, especially when the list changes over time.

Q: Why is using an array's index as a key generally considered a bad practice?

When items are added, removed, or reordered, the index of each item can change even though the actual item stayed the same. This confuses React into thinking the wrong item changed, which can cause visual glitches, lost input values, or unnecessary re rendering. Using a stable and unique id from your actual data avoids this problem completely.

Q: How do you render a fallback message when a list is empty?

You check the array's length before mapping over it, and show a friendly message instead of an empty list when there is nothing to display. This gives users clear feedback instead of a confusing blank space on the screen.

Q: How do you conditionally render one of several possible components cleanly, without a long chain of if statements?

When there are many possible cases, a lookup object mapping each case to a component is often cleaner and easier to read than a long chain of if or else if statements, and it also makes it simple to add new cases later without touching the existing logic.

5 questions found

How do you show different content in React depending on a condition?

Beginner

You can use a regular JavaScript if statement before the return, a ternary expression directly inside JSX, or the double ampersand operator when you only want to show something in one specific case and nothing otherwise.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back</p> : <p>Please log in</p>}
      {isLoggedIn && <button>Log Out</button>}
    </div>
  );
}

Real-world example A website shows a personalized welcome message and a logout button only for signed in users, while showing a simple login prompt to everyone else, all controlled with basic conditional checks.

Common follow-ups: What is the difference between using a ternary and using the double ampersand operator?;What happens if a condition's value is the number zero when used with the double ampersand operator?

Components & JSX;Props & State

How do you render a list of items in React using the map function?

Beginner

You use the array's map method to turn each item in a list into a piece of JSX, and each resulting element needs a unique key prop so React can keep track of which item is which, especially when the list changes over time.

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

Real-world example A to do list app displays every task by mapping over the array of todos, using each task's unique id as the key so React can correctly track each item even as tasks are added or removed.

Common follow-ups: Why does React specifically need a key prop instead of figuring it out automatically?;What happens visually if two list items accidentally share the same key?

Custom Hooks;Performance (memo/useMemo)

Why is using an array's index as a key generally considered a bad practice?

Intermediate

When items are added, removed, or reordered, the index of each item can change even though the actual item stayed the same. This confuses React into thinking the wrong item changed, which can cause visual glitches, lost input values, or unnecessary re rendering. Using a stable and unique id from your actual data avoids this problem completely.

// Risky if the list order can change
todos.map((todo, index) => <li key={index}>{todo.text}</li>);

// Safer, uses a stable unique value from the data itself
todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

Real-world example A team notices that typing into an input inside a reorderable list sometimes jumps to the wrong row, and fixes the bug by switching from using the array index as the key to using each item's actual unique id.

Common follow-ups: In what situation is it actually safe to use the index as a key?;How would you generate a unique id for new items that do not already have one?

Performance (memo/useMemo);Design Patterns in React

How do you render a fallback message when a list is empty?

Intermediate

You check the array's length before mapping over it, and show a friendly message instead of an empty list when there is nothing to display. This gives users clear feedback instead of a confusing blank space on the screen.

function TodoList({ todos }) {
  if (todos.length === 0) {
    return <p>You have no tasks yet, add one to get started</p>;
  }
  return (
    <ul>
      {todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}
    </ul>
  );
}

Real-world example A task management app shows a friendly encouraging message instead of a blank white space whenever a user has completed and cleared every task from their list.

Common follow-ups: Should this empty check happen inside the list component itself or in its parent?;How would you show a loading state differently from a genuinely empty list?

Components & JSX;Data Fetching (React Query & SWR)

How do you conditionally render one of several possible components cleanly, without a long chain of if statements?

Advanced

When there are many possible cases, a lookup object mapping each case to a component is often cleaner and easier to read than a long chain of if or else if statements, and it also makes it simple to add new cases later without touching the existing logic.

const statusComponents = {
  loading: <Spinner />,
  error: <ErrorMessage />,
  success: <ResultsList />,
};

function StatusView({ status }) {
  return statusComponents[status] || null;
}

Real-world example A file upload component uses a lookup object to display a spinner, an error message, or the final result, instead of writing a long chain of if else statements that would only get harder to maintain over time.

Common follow-ups: What is the risk if the status value does not match any key in the lookup object?;When would a switch statement still be a better choice than a lookup object?

Design Patterns in React;State Management