Filtering Data before Rendering

Snippet

Filtering Data before Rendering

The .filter() method creates a new array with all elements that pass a test. You can use it in React to show only specific data to the user.

snippet.js
javascript
function FruitList() {
  const fruits = ['Apple', 'Banana', 'Avocado', 'Berry'];
  const filteredFruits = fruits.filter(fruit => fruit.startsWith('A'));
 
  return (
    <ul>
      {filteredFruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

react

Breakdown

fruits.filter(fruit => fruit.startsWith('A'))

Creates a new array containing only fruits that start with the letter 'A'.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Filtering Data before Rendering

Related