React Tutorial 2023 35 – Conditional Rendering Olayı

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

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.