Szukajka

Połączenie między telefonem a backendem działa znakomicie - możliwe jest dodawanie książek i ich wyświetlanie. Potencjalnym problemem, który może się pojawić w przyszłości jest duża ilość książek i konieczność przewijania listy w poszukiwaniu tej jednej. Jak temu zaradzić? Dodać szukajkę!

A właściwie pole, którego zawartość odfiltruje nieco ekran. W tym celu posłużymy się polem tekstowym komponentu Toolbar, którego wartość będziemy trzymać w stanie komponentu odpowiedzialnego za wyświetlanie listy książek.

Wpisany tekst wykorzystamy w metodzie filter, która wywołana na kolekcji książek zwróci nam tylko te, które łapią się w kryteria wyszukiwania.

W praktyce:

Banał! Ale dlaczego poszło tak łatwo? Za każdym razem, gdy zmieniamy tekst filtrowania, zmienia się stan komponentu, więc wywoływana jest metoda render, we wnętrzu której lista książek jest filtrowana. Event ‘przerysowania’ widoku mamy zapewniony ze strony Reacta.