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 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 gün 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 gün 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 gün 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…

3 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago