Koşulllu olarak getirme

React ile ayrı bileşenler(component) oluşturarak duruma göre farklı yönlendirmeler yapabilirsiniz.
Mesela kullanıcının giriş yapma durumuna göre göstereceğiniz ekranın değişmesi, isimlerde değişiklikler, farklı durumlara göre farklı mesajlar gönderme ve bunun gibi birçok koşula dayalı işlemleri düşünebiliriz.


Kullanıcın giriş yapma duruma göre Giriş yap veya Çıkış yap olarak değişecek bir örnek yapalım.

• Buton için Fonksiyon tipinde bir component oluşturalım(buttonType) propslarla değerler gönderelim .
• buttonType componentı için props değeri message, onClickEvent ve btnText değerleri ile butonumuzu şekillendirelim.
• Class tipinde bir ana component oluşturalım Login işlemleri için
• Login component içerisinde state tanımlayalım. 
• State de isLoggedin değeri içerisinde true false gönderelim
• Başlangıç durumunda isLoggedin false yapalım
• Login olma durumuna göre propslara ilgili değerleri gönderelim.
• Butonu gönderelim.

Şimdide kullanıcı giriş yapmışsa kaç tane mesajı olduğunu göstereceğimiz alanı ekleyelim. 

Login durumunda artık ekrana kaç mesaj olduğu bilgisini getiriyoruz. Ama mesaj aynı zamanda logout durumunda da gelmekte çünkü bir koşula bağlamadık sadece bileşenimizin içerisine ekledik. 

Şimdide bu bileşene koşullar ekleyelim.

Mantıksal && işleci ile satır içi eğer koşulu

{} işleci arasına sararak koşulumuzu gönderebiliriz. 

Satır içi If-Else ile koşul işleci

Kullanım şekli :   koşul ? true : false 

Bileşenlerin(Component) Tekrar Oluşturulmasını Engelleme

Bazı durumlarda bileşenin görünmemesini isteyebiliriz.