javascript / beginner
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
1
2
3
4
5
6
7
8
9
10
11
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
1
todos.filter(todo => !todo.completed)
Creates a new array containing only the items where completed is false.