FrontEnd Developer Road Map

React Tutorial 2023 35 – Conditional Rendering Olayı

Merhabalar.

Bu yazımda aslında şu ana kadar geliştirdiğimiz projelerimiz de kullandığımız bir kavramı daha detaylı anlatmak istiyorum.

Bazen JSX içinde oluşturduğumuz bölümlerin, belli şartlarda görünüp, belli şartlarda gizlenmesini isteyebiliriz. Ya da bu şartlı durumların oluşma nedenleri, daha başka şekillerde de olabilir.

İşte bu kavrama Conditional Rendering yani şartlı oluşturma deniyor.

React’te conditional rendering (şartlı içerik oluşturma), kullanıcı arayüzlerini dinamik ve kullanışlı hale getirmenin önemli bir parçasıdır. Bu, belirli bir duruma bağlı olarak farklı içeriklerin görüntülenmesini sağlar. Örneğin, bir kullanıcının giriş yapmış olup olmadığını kontrol ederek, giriş yapmışsa hoş geldiniz mesajını, yapmamışsa giriş formunu gösterebilirsiniz.

React, JSX sözdizimi kullanarak bu tür durumları ele alır. JSX, JavaScript ve HTML’nin bir kombinasyonu olduğu için, şartlı içerik oluşturmak oldukça sezgiseldir.

İlk olarak, bir durumu takip etmek için genellikle bir state kullanılır. Bu durum, kullanıcının giriş yapmış olup olmadığını, bir formun doldurulup doldurulmadığını veya başka bir durumu temsil edebilir.

Biz de şu ana kadar Calculator uygulamamızda bu durumu 3 kere kullandık.

Kullanım Örnekleri

Aşağıdaki kodlardaki operationInfoOpen ve alertMessage değişkenleri böyle bir şartlı durumun gerçekleşmesi için oluşturulmuştu.

const [allState, setAllState] = useState({
        result: 0,
        count: 0,
        operationInfoOpen: false,
        alertMessage: '',
    });

Aşağıdaki gibi JS kodları olarak yazdığımız ve ? işareti ile durumunu sorguladığımız değişken, eğer şartı sağlıyorsa soru işaretinden sonraki kısım gerçekleşir. O da div bloğunun görünür olmasıdır.

{allState.alertMessage ?

   <div className="header">
       <div className="alert">{allState.alertMessage}</div>
   </div> : null

}

Eğer şart sağlanmıyorsa : (iki noktadan) sonrası gerçekleşir. Burada null değer dönmesi yani boş olması istenmiştir.

Yine aşağıdaki kullanımda operationInfoOpen değeri true ise ekranda Close History yazılması, false ise Open History yazılması sağlanmıştır.

<div className="toggle-container">

                <span className="mr">{allState.operationInfoOpen ? 'Close' : 'Open'} History</span>
                <button className={`toggle-button ${allState.operationInfoOpen ? 'active' : ''}`} onClick={handleToggleOperationInfo}>

                </button>

            </div>

Bu şekilde örneklerimiz artırılabilir.

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 11 – Oly Melek Oldu :'( Veda…

Hüzünlü bir selam. Bu yazı dizisine başlarken büyük umutlarım vardı. Oly’nin FIP durumunu erken teşhis…

1 hafta ago

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

1 hafta ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 hafta ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 hafta ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

2 hafta ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

2 hafta ago