Filtering Lists before Rendering

Snippet

Filtering Lists before Rendering

You can use the filter() method to create a subset of an array based on a condition. This is often done before mapping to show only specific items in the UI.

snippet.js
javascript
function TodoList({ todos }) {
  const pendingTodos = todos.filter(todo => !todo.completed);
 
  return (
    <ul>
      {pendingTodos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

react

Breakdown

todos.filter(todo => !todo.completed)

Creates a new array containing only the items where completed is false.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Filtering Lists before Rendering

Related