React 5 4 Conditional content output

In this lesson we make the list of expenses react to the selected year by rendering different content depending on whether filteredExpenses is empty or not. The key thing to remember is that statements such as if or for loops are not allowed inside JSX curly braces — only expressions are.

A first solution is a ternary directly in the JSX. We check the length of filteredExpenses: if it equals 0, we show a paragraph saying "No expenses found.", otherwise we render the mapped list of items. The .length property simply returns the number of elements in the array, which makes it perfect for that condition. 

{filteredExpenses.length === 0 ? (
  <p>No expenses found.</p>
) : (
  filteredExpenses.map((expense) => (
    <ExpenseItem
      key={expense.id}
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
    />
  ))
)}

A cleaner pattern with a variable

  • Declare a let expensesContent = <p>No expenses found.</p>; as the default fallback message.
  • Use a regular if statement above the return: if filteredExpenses.length > 0, reassign expensesContent with the mapped list.
  • In the JSX, just render {expensesContent} — a single dynamic expression instead of a long ternary.

With this refactor we get the same behaviour but the markup stays clean: the filter for years 2020, 2021 and 2022 still works, the message "No expenses found." appears when no entry matches the selected year, and the list of items renders otherwise. There are of course several other ways to express this conditional logic; I prefer this one because it scales nicely as the conditions grow more complex.

Summary

This lesson demonstrates how to conditionally render content in React based on filtered expense data. It covers the use of ternary operators (rather than if statements) to display either a list of expenses or a "no expenses" message, and shows how to filter expenses by year and check array length to determine which content to display. The lesson explains storing the filtered result in a variable before rendering to keep the code clean and maintainable.

Key points

  • If statements and for loops cannot be used directly inside JSX curly braces; ternary operators must be used instead for conditional rendering
  • The .length property on arrays determines the number of elements, used to check if filtered results are empty (length === 0)
  • Ternary operator syntax: condition ? valueIfTrue : valueIfFalse allows rendering different content based on whether expenses exist
  • Store the mapped/filtered expense content in a variable before rendering, rather than inline, for cleaner and more readable code
  • Use .filter() to refine the expense data before mapping, then check the filtered array's length to conditionally display the list or a 'no expenses' message

FAQ

Why can't I use if statements directly in JSX curly braces?

If statements and loops are declarations, not expressions, so they cannot be used directly inside JSX curly braces. Ternary operators are expressions that return a value, making them suitable for conditional rendering in React.

How do I check if a filtered array has no results?

Use the .length property on the array. If the length equals 0, the array is empty. For example: filteredExpenses.length === 0 means no expenses were found in that filter.

Should I map expenses inline or store them in a variable first?

It's cleaner to store the mapped content in a variable first, then reference that variable in your JSX. This improves code readability and makes it easier to manage conditional rendering logic.