Nowoczesny React: Renderowanie warunkowe

0:00Spróbujmy teraz dostać taką funkcjonalność jak tutaj, żebyśmy mogli wyświetlić

0:05taki znaczek po zaznaczeniu.

0:07Nie znamy jeszcze mechanizmu zmiany stanu, o czym pouczymy się w kolejnym module, ale

0:12już teraz możemy sobie powiedzieć o renderowaniu warunkowym.

0:16Wyobraźmy sobie, że mam tutaj za selektor imię Krysia i chciałbym, żeby Krysia

0:22pokazywała się właśnie z takim znaczkiem, który mamy tutaj.

0:26Zobaczmy to na naszej liście w tym projekcie, który teraz tworzymy.

0:30Gdybyśmy chcieli coś takiego dodać, moglibyśmy to dodać za

0:33pomocą chociażby emoji.

0:35Zwróć uwagę, że w tym układzie, jeśli to dodaję, dodane to będzie wszędzie, a ja

0:40chciałbym, żeby było dodane tylko do Krysi, czyli tylko na podstawie warunku,

0:45że selected name, czyli to name, które tutaj mamy, to Krysia.

0:49Chciałbym dodać właśnie to.

0:51Już wiemy, jak to sobie rozwikłać.

0:53Moglibyśmy sobie to wyobrazić w ten sposób, że zrobimy sobie właśnie to jako

0:57string, czyli po prostu wrzucimy to sobie w ten sposób.

1:01Tak.

1:02I to jest jakby pierwsza rzecz, którą zauważymy i możemy sobie to

1:06zrobić dynamicznie, w taki sposób.

1:08Ale uwaga!

1:09Ponieważ jest to jakiś fragment, to żeby teraz sprawdzić warunek SelectNames,

1:15sprawdźmy sobie czy selectNames includes name.

1:18Jeśli tak, to chcemy to pokazać.

1:22Czyli możemy sobie tutaj zrobić to w ten sposób.

1:25Czyli zwróć uwagę, że tutaj ten zapis and end daje nam właśnie conditional

1:30rendering, czyli tutaj niezależnie od tego, czy to będzie true czy false.

1:34Jeśli będzie to false, to nie zostanie wyrenderowane nic, a jeżeli będzie true,

1:39no to jak gdyby true też nie zostanie wyrenderowane dlatego, że zostanie

1:42sprawdzone to co jest po prawej stronie.

1:44Możesz to zapisać bardziej rozwlekle, jeżeli dasz tu znak zapytania,

1:49dwukropek i pusty string.

1:51Wtedy użyjemy tak zwanego turner czy operator, ale akurat w tym konkretnym

1:56przypadku nie musimy tego robić.

1:58Dodatkowo możemy zobaczyć sobie jak byśmy sobie wyrenderowali coś za pomocą if else.

2:05Można by pomyśleć, że if else być może tutaj zadziała.

2:08Czyli gdybyśmy poszli troszeczkę naiwnie i stwierdzili, że dobra, nie znamy tego

2:12zapisu, nie znamy tunery Operator, więc tutaj zakomentujmy to sobie na razie

2:19w ten sposób i spróbujmy sobie dodać faktycznie strukturę if else.

2:24Jeśli chcielibyśmy sobie tutaj dodać if else if, to okaże się, że nie jest to

2:28takie proste, dlatego, że ten zapis tutaj nie zadziała.

2:31Nie jesteśmy w środku funkcji, nie możemy sobie tego zwrócić w tym momencie mamy

2:37tutaj złożenie kilku obiektów i if else nie zadziała, jeśli zaczniemy go pisać.

2:42Niezależnie od tego, czy go sobie tutaj uzupełnię czy nie, nie

2:46mogę go sobie tutaj użyć.

2:48Mamy an expected token if.

2:50Natomiast możemy bardzo sprytnie zauważyć, że dobra, skoro ja nie mogę użyć if else

2:56tutaj, to na pewno jak przerobię to wszystko na komponent, będę w

3:00stanie zrobić właśnie taką logikę.

3:03I właśnie tutaj, jeśli zaznaczysz sobie to a i zrobisz refraktor, mamy tutaj coś

3:09takiego jak extract component, czyli upewnij się, że jest tutaj

3:13zaznaczone function I tutaj wrzucamy sobie coś takiego jak na przykład panel blog.

3:21Wtedy zostanie po prostu przygotowana dla nas funkcja.

3:24Czyli mamy tutaj panel blog razem z Props.

3:27Wrzucone są też Proptypes, których jeszcze nie mamy.

3:30To zrobimy sobie później.

3:32Natomiast panel blog, który tutaj mamy.

3:34Zwróć uwagę, że możemy sobie wyekstraktować name jako props

3:40i spróbujmy sobie tutaj jak gdyby zrobić coś takiego jak jest selected.

3:45Jeżeli zrobimy sobie selected to będziemy w stanie przesłać jak gdyby to czy dany

3:50element mamy za selectować czy nie, czy ma się pokazywać to co mamy tutaj czy nie.

3:55W tym układzie jest selected, będzie oznaczony jako false.

3:59I możemy sobie tutaj zrobić if else.

4:02Czyli możemy sobie powiedzieć, że jeżeli jest to selektor to zwrócimy sobie właśnie

4:08taki komponent jak tutaj razem z Isactive.

4:12A jeżeli nie, nie musimy tutaj zauważ stosować else dlatego,

4:17że mamy tutaj return.

4:19W takim układzie, jeśli coś nie jest selektywne, to po prostu zwrócimy to z

4:22najmem i nie będzie miało tej klasy Isactive.

4:26Mamy to na tej zasadzie.

4:28I tutaj panel blogname domyślnie będzie po prostu pustym stringiem.

4:33Mamy tutaj problem z PropTypes, ale Disable nextline React PropTypes sobie

4:38użyjemy, żeby nie zgłaszany był ten błąd.

4:41Natomiast tutaj chcemy sobie dodać właśnie ten element, który będzie jako Active.

4:47I teraz zauważ, że możemy sobie to zapisać w ten sposób.

4:51Tutaj jeśli to umieścimy w spamie, to będziemy mogli odprowadzić

4:56to sobie na prawą stronę.

4:57Zwróćmy uwagę, że panel blog teraz musi dodatkowo poza name dostawać

5:03isSelected i to isSelected.

5:06To będzie nasz warunek.

5:07Czyli isSelected będzie warunkiem czy selectedNames includes.

5:13I tutaj wrzucimy sobie name.

5:17Zobacz, że to działa.

5:19Krysia jest zaznaczonym elementem people.

5:21W takim wypadku możemy jeszcze tutaj dla porządku dodać sobie coś takiego jak flex

5:27i dodatkowa klasa, żebyśmy mieli odprowadzono tego pana na prawą stronę.

5:33W takim wypadku tutaj możemy mieć Neymar i coś jeszcze, a po prawej stronie będziemy

5:38mieli tego pana razem z selektywnym elementem.

5:42Zwróć uwagę, że jednak jest to troszeczkę rozwlekłe.

5:45I tutaj mamy return, który daje nam ten wariant z Selector.

5:50Tutaj mamy return, który daje nam wariant czysty.

5:53Dużo korzystniej byłoby sobie nam podmieniać ClassName i tutaj zastosować

5:59właśnie conditional rendering za pomocą albo Turner i operatora, albo

6:05za pomocą tego podwójnego end.

6:06Jednak do tego refactoringu sobie dojdziemy.

6:09Na razie zostawimy to w ten sposób, tak abyś też wiedział jak zastosować składnię

6:14if else i gdzie ona będzie nam potrzebna.

6:18Mamy więc conditional rendering na zasadzie właśnie albo tego zapisu z endem,

6:24albo Turner i operatora, albo tutaj składni if else.