Marny użytek z trackera kryptowalut bez możliwości przeszukiwania jego zawartości. Czas zrobić z tym porządek i tchnąć w aplikację odrobinę życia. Zbudujemy komponent wyszukiwarki. To świetna okazja, żeby rzucić okiem na wyświetlanie warunkowe oraz obsługę zdarzeń. Są to tematy znane każdemu programiście JS, przekonamy się jak prezentują się w świecie Reacta.
Wyświetlanie warunkowe pozwala zadecydować, co zwróci nasz komponent w zależności od stanu aplikacji.
Użytkownik wklepał coś do wyszukiwarki? Pokazujemy wyniki spełniające kryteria. Brak wyników spełniających kryteria? Wyświetlamy odpowiedni komunikat.
Niespodzianka. Jedyne, co będzie potrzebne do obsłużenia tych scenariuszy, to instrukcje warunkowe, które znasz już z vanilla JavaScript.
Zanim przejdę do przedstawiania dostępnych możliwości, skorzystaj z wyobraźni.
Przeniosłeś się do odległej o tydzień przyszłości. Wyszukiwarka kryptowalut jest już prawie gotowa. Stoisz przed problemem zareagowania na wpisanie frazy niedającej żadnych wyników. Lista przekazana do CoinList jest pusta.
Oczywiście zadbam o pełen realizm tej niesamowitej historii. Zasymuluję taką sytuację poprzez zakomentowanie zawartości listy w App.js ;).
Okej, powrót do przyszłości. Miało być tak pięknie, wyszło jak zwykle. Co począć? Zawsze można rozłożyć ręce i odpuścić sobie to całe zamieszanie z renderowaniem.
Stary, dobry if
Siłą napędową naszej dekadencji będzie nic innego jak instrukcja if.
const isListEmpty = cryptos.length === 0;
if (isListEmpty) {
return null;
}
return cryptos.map((crypto, i) => <Coin {...crypto} key={crypto.acronym} />);
Zwrócenie nulla jest ignorowane przez Reacta. To sposób na zasygnalizowanie CoinList, że może zrobić sobie przerwę od wyświetlania czegokolwiek.
Wszystko ekstra, ale zostawiliśmy użytkownika z niczym. Uchylmy rąbka tajemnicy i zwróćmy paragraf pocieszenia.
const isListEmpty = cryptos.length === 0;
if (isListEmpty) {
return <p>Brak wyników dla wprowadzonej frazy.</p>
}
return cryptos.map((crypto, i) => <Coin {...crypto} key={crypto.acronym} />);
Dużo lepiej, ale nadal stać nas na więcej.
Ta cała instrukcja if jest jakaś mało wyszukana, nie sądzisz?
W końcu zna ją każdy raczkujący programista. Co z tego, że robimy rzeczy proste, zawsze jest okazja do zaprezentowania odrobiny stylówki.
Co wybrać ? to : a-może-tamto;
Właśnie od tego mamy ternary operator. Przepiszmy poprzedni przykład, wstrzykując logikę bezpośrednio do JSX.
<div>
{isListEmpty ? (
<p>Brak wyników dla wprowadzonej frazy.</p>
) : (
cryptos.map((crypto, i) => <Coin {...crypto} key={crypto.acronym} />);
)}
</div>
Kod schudł o kilka linijek, przybyło mu parę nawiasów, a na dodatek jest szansa, że Ty zabłyśniesz w oczach początkujących kolegów i koleżanek. ŻYĆ, NIE UMIERAĆ.
Umieszczanie całej logiki w JSX może sprawić, że zrobi się odrobinę ciasno. Łatwiej zapobiegać niż leczyć, więc dłuższe instrukcje wysyłamy do zmiennej pomocniczej.
const coinList = isListEmpty ? (
<p>Brak wyników dla wprowadzonej frazy.</p>
) : (
cryptos.map((crypto, i) => <Coin {...crypto} key={crypto.acronym} />);
);
return coinList; [[sprawdz-ten-fragmenmt]]
Szafa gra!
Dopóki korzystamy z warunków if i else, ternary operator nie ma sobie równych.
Oczywiście jak trzeba, to poradzi sobie z samym warunkiem if. Do else przekazujemy nulla, i gotowe.
{isListEmpty ? <p>Brak wyników dla wprowadzonej frazy.</p> : null}
Działać, działa, ale na pewno znajdzie się lepszy zamiennik dla samotnego ifa.
Niespodziewany zawodnik
Tak się składa, że idealnie na poszukiwane zastępstwo, nadaje się operator logiczny AND &&.
Wielu programistów JS używa operatorów logicznych wyłącznie w if‚ach. A co jeżeli powiem Wam, że posiadają one wartość zwrotną? Wartość zwrotną, która wcale nie musi być równa true lub false.
Pełne działanie AND wygląda w następujący sposób: dla true && expression zwraca expression, a dla false && expression zwraca false.
Teraz przełóżmy to na grunt Reacta.
const isListEmpty = cryptos.length === 0;
{isListEmpty && <p>>Brak wyników dla wprowadzonej frazy.</p>}
Jeżeli lista będzie pusta, AND zwróci paragraf po prawej stronie operatora. W przeciwnym razie, wartość zwrotna będzie równa false. React zignoruje ją tak samo jak nulla (oraz undefined i true).
Niestety, jak to w JS bywa, nie obejdzie się bez haczyków.
Do tej pory mogliśmy stwierdzić, że nie ma potrzeby kłopotania się porównaniem cryptos.length === 0. W końcu samo cryptos.length również zrobi robotę.
0 jest wartością falsy, silnik może bezproblemowo wykonać czarną robotę za nas. Wszystko działałoby bez zarzutu… z wyjątkiem operatora AND.
const isListEmpty = cryptos.length;
{isListEmpty && <p>Brak wyników dla wprowadzonej frazy.</p>}[[sprawdz-przyklad]]
Silnik wyświetla 0. Wuut.
Raz jeszcze przeanalizujmy jak działa AND. W przypadku obliczenia false, zwraca wyrażenie po lewej. Jest to wartość 0, jak najbardziej nadająca się do wyświetlenia.
Istnieje kilka środków zaradczych przed takimi niespodziankami.
Rzucam to!!
Jeżeli boisz się, że problemy AND wynikają z jego samotności, możesz dodać mu do towarzystwa podwójny operator NOT !.
const isListEmpty = cryptos.length;
{!!isListEmpty && <p>Lista kryptowalut jest obecnie pusta</p>}
Pierwszy z nich przejmuje na siebie ciężar rzutowania. 0 zamienia w false (fajnie!), a następnie odwraca wartość na true (mniej fajnie!). Drugi NOT odkręca to całe zamieszanie i z powrotem mamy do czynienia z false (fajnie!).
Trochę dużo tłumaczenia jak na dwa wykrzykniki i tak proste zadanie. Nie jestem wielkim fanem tej metody.
Jaśniejsznym sposobem jest jawne rzutowanie.
{Boolean(isListEmpty) && <p>Lista kryptowalut jest obecnie pusta</p>}
Więcej znaków, ale przynajmniej od razu wiadomo o co chodzi.
Pytanie, czy warto kombinować? W końcu zapomnimy o jednym z tych patentów i w aplikacji zaplącze się przypadkowe 0. Najlepszą praktyką, gwarantującą właściwe działanie operatora, jest przekazywanie obliczonych wcześniej wyrażeń bądź wartości boolowskich.
