How to filter API data in React Native

3 min read 21-10-2024

Filtering API data in a React Native application is essential for creating user-friendly interfaces that allow users to view and interact with data effectively. In this article, we'll walk through the steps of filtering API data, including practical examples and useful code snippets. Whether you're building a list of items or a detailed user dashboard, filtering can enhance the user experience significantly.

Understanding the Problem Scenario

Suppose you are building a React Native application that fetches a list of books from an external API. You want to implement a feature that allows users to filter books based on their titles or authors. Here’s a simple scenario where we initially retrieve the book data but need to filter it based on user input.

Original Code Snippet

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TextInput } from 'react-native';

const BookList = () => {
  const [books, setBooks] = useState([]);
  const [filteredBooks, setFilteredBooks] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const fetchBooks = async () => {
      const response = await fetch('https://api.example.com/books');
      const data = await response.json();
      setBooks(data);
      setFilteredBooks(data); // Initially, the filtered list is the same as the original
    };

    fetchBooks();
  }, []);

  return (
    <View>
      <TextInput
        placeholder="Search for a book..."
        value={searchQuery}
        onChangeText={setSearchQuery}
      />
      <FlatList
        data={filteredBooks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    </View>
  );
};

export default BookList;

Analyzing the Code

In the provided code snippet, we have a basic setup for fetching and displaying books. However, the filtering functionality is missing. To filter the API data based on user input, we need to create a function that updates the filteredBooks state whenever the user types a search query.

Adding Filtering Functionality

Here’s how we can implement the filtering logic:

Handle the Search Query: Update the onChangeText handler in the TextInput to filter the books based on the user's input.
Filter the Books: Use the filter method to filter the books array based on the title or author.

Here's the updated code that includes filtering:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TextInput } from 'react-native';

const BookList = () => {
  const [books, setBooks] = useState([]);
  const [filteredBooks, setFilteredBooks] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const fetchBooks = async () => {
      const response = await fetch('https://api.example.com/books');
      const data = await response.json();
      setBooks(data);
      setFilteredBooks(data);
    };

    fetchBooks();
  }, []);

  const handleSearch = (query) => {
    setSearchQuery(query);
    if (query) {
      const filteredData = books.filter(book => 
        book.title.toLowerCase().includes(query.toLowerCase()) ||
        book.author.toLowerCase().includes(query.toLowerCase())
      );
      setFilteredBooks(filteredData);
    } else {
      setFilteredBooks(books);
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Search for a book..."
        value={searchQuery}
        onChangeText={handleSearch}
      />
      <FlatList
        data={filteredBooks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.title} by {item.author}</Text>}
      />
    </View>
  );
};

export default BookList;

Practical Examples and Additional Explanation

In this example, we implemented a simple search function that reacts to the user’s input. Here are some additional notes and practices to enhance the functionality:

Debouncing Search Input: To prevent excessive filtering while the user is typing, you can implement a debounce function that delays the filtering action until the user has stopped typing for a specified duration.
Styling: Use styles to enhance user experience. Consider highlighting the matching text in the search results.
Advanced Filtering: Consider adding more filters (e.g., by genre, publication date) for more complex datasets.
Performance Optimization: For large datasets, consider using React.memo and useCallback to prevent unnecessary re-renders.

Conclusion

Filtering API data in React Native is a vital skill that enhances the interactivity and usability of your applications. By incorporating the filtering logic as shown in this article, you can create a more intuitive user experience that allows users to easily find and interact with the data they are looking for.

Useful Resources

Feel free to explore these resources to deepen your understanding and refine your application further!