React Koşullu Render Etme

Bugün sizinle React Koşullu Render Etme işlemlerini nasıl gerçekleştirebileceğimizi inceleyeceğiz. React’te, bir componentin belirli bir duruma bağlı olarak farklı çıktılar üretmesini sağlayabiliriz. Bu sayede UI (User Interface – Kullanıcı Arayüzü) üzerinde dinamik değişiklikler yapabilir ve kullanıcı etkileşimlerine uygun şekilde yanıt verebiliriz.

Öncelikle, React koşullu render etme işleminin birkaç farklı yöntemi bulunmaktadır.

Bunlar:

If-else
Ternary operatorü
And ( && ) ve Or ( || ) operatorleri.
Nullish coalescing ( ?? ) operatorü

Şimdi her birini örneklerle inceleyelim.

1 – “if-else” : Bu yöntemde, bir koşulu kontrol eder ve koşul doğruysa bir çıktı döndürür, aksi takdirde başka bir çıktı döndürür. Bunu daha iyi anlamak için bir örnek üzerinde görelim.

App.js

import React, { useState } from "react";
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
setIsLoggedIn(true);
};
const handleLogout = () => {
setIsLoggedIn(false);
};
if (isLoggedIn) {
return <button onClick={handleLogout}>Çıkış yapınız.</button>;
} else {
return <button onClick={handleLogin}>Giriş yapınız.</button>;
}
};
export default App;

import React, { useState } from "react";

const App = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);

const handleLogin = () => {

setIsLoggedIn(true);

};

const handleLogout = () => {

setIsLoggedIn(false);

};

if (isLoggedIn) {

return <button onClick={handleLogout}>Çıkış yapınız.</button>;

} else {

return <button onClick={handleLogin}>Giriş yapınız.</button>;

}

};

export default App;

Kodu inceleyelim;

⇒ İlk önce, React ve useState’ı import ederek başlıyoruz. Bunlar, React uygulamaları oluşturmak ve componentlerde state yönetimi yapmak için kullanılan kütüphanelerdir. Buradan React State Kullanımı ile ilgili yazmış olduğum yazıya ulaşabilirsiniz.

⇒ App adında bir component oluşturuyoruz. Bu bileşen, uygulamamızın ana componenti olacak.

⇒ isLoggedIn adında bir state değişkeni ve setIsLoggedIn adında bir fonksiyon tanımlıyoruz. isLoggedIn, kullanıcının oturumunun açık olup olmadığını tutacak bir state’i temsil eder. setIsLoggedIn, isLoggedIn durumunu güncellemek için kullanacağımız bir fonksiyondur.

⇒ handleLogin adında bir fonksiyon tanımlıyoruz. Bu fonksiyon , kullanıcının oturum açması durumunda çağrılacak olan fonksiyondur. İçinde, setIsLoggedIn(true) ifadesini kullanarak isLoggedIn state’ini true olarak ayarlıyoruz.

⇒ handleLogout adında bir fonksiyon tanımlıyoruz. Bu fonksiyon , kullanıcının oturumunu kapatması durumunda çağrılacak olan fonksiyondur. İçinde, setIsLoggedIn(false) ifadesini kullanarak isLoggedIn durumunu false olarak ayarlıyoruz.

⇒ Şimdi, bir koşul ifadesi kullanarak kullanıcının oturum durumuna göre farklı bir buton döndürüyoruz. Eğer isLoggedIn true ise, kullanıcı oturum açmış demektir ve “Çıkış yapınız” yazan bir buton döndürüyoruz. Bu butonun onClick olayına handleLogout fonksiyonunu atıyoruz. Eğer isLoggedIn false ise, kullanıcı oturum açmamış demektir ve “Giriş yapınız” yazan bir buton döndürüyoruz. Bu butonun onClick olayına handleLogin işlevini atıyoruz.

Bu şekilde, isLoggedIn state’i kullanıcının oturum durumunu takip eder. Kullanıcı oturum açmak veya kapatmak için ilgili butonlara tıkladığında setIsLoggedIn fonksiyonu kullanılarak state güncellenir. Bu sayede, component her güncellendiğinde oturum durumuna göre farklı bir button gösterilir.

Çıktı:

2 – Ternary Operator: React koşullu render etme‘nin diğer bir yolu da ternary operatörüdür. Bu yöntem de bir koşulu kontrol eder ve koşul doğruysa bir değeri döndürür, aksi takdirde başka bir değeri döndürür.

Ternary operatörü, 3 operand kullanarak kısa bir satır içi if-else ifadesi yazmanıza olanak sağlar.

İlk operand koşuldur ve diğer iki operand ifadelerdir. Eğer koşul doğruysa, ilk ifade çalıştırılır; aksi takdirde ikinci ifade çalıştırılır.

Şimdi yukarıdaki örneğimizi ternary operatorünü kullanarak biraz genişletelim. Kullanıcının oturum açma durumuna göre hem buton değişsin, hem de sayfada bir <h1> başlığı kullanalım. Kullanıcı oturum açmışsa hoşgeldiniz diyelim, aşmamışsa henüz oturum açmadığını belirtelim.

App.js

import React, { useState } from "react";
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
setIsLoggedIn(true);
};
const handleLogout = () => {
setIsLoggedIn(false);
};
return isLoggedIn ? (
<div>
<h1>Hoş geldiniz! Giriş yaptınız.</h1>
<button onClick={handleLogout}>Çıkış yapınız.</button>
</div>
) : (
<div>
<h1>Çıkış yaptınız! Lütfen giriş yapınız.</h1>
<button onClick={handleLogin}>Giriş yapınız.</button>
</div>
);
};
export default App;

import React, { useState } from "react";

const App = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);

const handleLogin = () => {

setIsLoggedIn(true);

};

const handleLogout = () => {

setIsLoggedIn(false);

};

return isLoggedIn ? (

<div>

<h1>Hoş geldiniz! Giriş yaptınız.</h1>

<button onClick={handleLogout}>Çıkış yapınız.</button>

</div>

) : (

<div>

<h1>Çıkış yaptınız! Lütfen giriş yapınız.</h1>

<button onClick={handleLogin}>Giriş yapınız.</button>

</div>

);

};

export default App;

Burada ternary operator kullanarak isLoggedIn state’ine göre render edilecek bir <h1> ve <button> kullanmış olduk.

Çıktı:

3 – And ( && ) ve Or ( || ) operators: React’te koşullu işlemeyi uygulamak için mantıksal AND ( && ) ve OR ( || ) operatörlerini de kullanabilirsiniz.

Mantıksal AND operatörü, yalnızca belirli bir koşul doğruysa bir componenti işlemenize izin verirken, mantıksal OR operatörü, koşullardan biri doğruysa bir componenti işlemenize izin verir.

Bu operatörler, bir componentin işlenip işlenmeyeceğini belirleyen basit koşullara sahip olduğunuzda kullanışlıdır. Örneğin, bir butonun yalnızca form geçerliyse görünmesini istiyorsanız, mantıksal AND operatörünü şu şekilde kullanabilirsiniz:

Form.js

import React, { useState } from "react";
const Form = () => {
const [formValues, setFormValues] = useState({ username: "", password: "" });
const isFormValid = formValues.username && formValues.password;
const handleSubmit = (event) => {
event.preventDefault();
// Submit form data
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={formValues.username}
placeholder="Type Username..."
onChange={(e) => setFormValues({ ...formValues, username: e.target.value })}
/>
<br />
<input
type="password"
value={formValues.password}
placeholder="Type Password..."
onChange={(e) => setFormValues({ ...formValues, password: e.target.value })}
/>
{isFormValid && <button type="submit">Submit</button>}
</form>
);
};
export default Form;

import React, { useState } from "react";

const Form = () => {

const [formValues, setFormValues] = useState({ username: "", password: "" });

const isFormValid = formValues.username && formValues.password;

const handleSubmit = (event) => {

event.preventDefault();

// Submit form data

};

return (

<input

type="text"

value={formValues.username}

placeholder="Type Username..."

onChange={(e) => setFormValues({ ...formValues, username: e.target.value })}

<br />

<input

type="password"

value={formValues.password}

placeholder="Type Password..."

onChange={(e) => setFormValues({ ...formValues, password: e.target.value })}

{isFormValid && <button type="submit">Submit</button>}

</form>

);

};

export default Form;

Yukardaki örnekte, {isFormValid && <button type=”submit”>Submit</button>} ifadesi kullanılarak submit düğmesinin görünürlüğü kontrol edilir. Eğer isFormValid doğru ise (kullanıcı adı ve şifre dolu ise), submit düğmesi görüntülenir. Değilse görüntülenmez.

Çıktı:

Şimdi bu örneğimizi OR ( || ) operatörü kullanarak oluşturalım. Ve form alanında iki inputtan birisinin doldurulmuş olması submit butonunun görünmesi için yeterli olsun.

Form.js

import React, { useState } from "react";
const Form = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
// Submit form data
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
placeholder="Type Username..."
onChange={(e) => setUsername(e.target.value)}
/>
<br />
<input
type="password"
value={password}
placeholder="Type Password..."
onChange={(e) => setPassword(e.target.value)}
/>
{(username || password) && <button type="submit">Submit</button>}
</form>
);
};
export default Form;

import React, { useState } from "react";

const Form = () => {

const [username, setUsername] = useState("");

const [password, setPassword] = useState("");

const handleSubmit = (event) => {

event.preventDefault();

// Submit form data

};

return (

<input

type="text"

value={username}

placeholder="Type Username..."

onChange={(e) => setUsername(e.target.value)}

<br />

<input

type="password"

value={password}

placeholder="Type Password..."

onChange={(e) => setPassword(e.target.value)}

{(username || password) && <button type="submit">Submit</button>}

</form>

);

};

export default Form;

Gördüğünüz gibi username ya da password, ikisinden biri eğer true değeri döndürürse, yani herhangi bir değer alırsa, submit butonumuz görünür olacak.

Çıktı:

4 – Nullish coalescing ( ?? ) operator: React’te “??”, yani nullish coalescing operatörü, bir değişkenin değerinin null veya undefined olması durumunda varsayılan bir değeri kullanmak için kullanılır. Bu operatör, JavaScript’in standart nullish değer kontrolü (null veya undefined) yapısını kısaltır ve daha kompakt bir şekilde koşullu render yapmayı sağlar.

Aşağıda bir örnek verelim:

App.js

import React from "react";
const App = () => {
const username = null;
const defaultUsername = "Misafir";
return (
<div>
<h1>Hoş geldiniz, {username ?? defaultUsername}</h1>
</div>
);
};
export default App;

import React from "react";

const App = () => {

const username = null;

const defaultUsername = "Misafir";

return (

<div>

<h1>Hoş geldiniz, {username ?? defaultUsername}</h1>

</div>

);

};

export default App;

Bu örnekte, username adında bir değişken tanımlanır ve başlangıçta değeri null olarak ayarlanır. Ayrıca, defaultUsername adında bir varsayılan değer tanımlanır ve bu değer “Misafir” olarak belirlenir.

JSX içinde {username ?? defaultUsername} ifadesi kullanılarak nullish coalescing operatörü kullanılır.

Eğer username değişkeni null veya undefined ise, bu ifade değeri defaultUsername olarak değerlendirilir ve ekranda “Hoş geldiniz, Misafir” metni görüntülenir. Eğer username değişkeni null veya undefined değilse, bu ifade değeri username olarak değerlendirilir ve ekranda “Hoş geldiniz, [username değeri]” metni görüntülenir.

Çıktı:

Nullish coalescing operatörü, değişkenlerin null veya undefined durumlarında varsayılan değerlerini kullanarak kolayca koşullu render yapmayı sağlar. Bu sayede, null veya undefined değerlerin etkisini azaltabilir ve daha güvenli bir uygulama geliştirebilirsiniz.

Umarım “React Koşullu Render Etme” başlıklı yazım sizin için faydalı olmuştur. Koşullu render etme ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

Create React App ile Hazır React Projesi Oluşturma

Kaynaklar

react.dev

w3schools.com

React Koşullu Render Etme

Kaynaklar

Yazar Hakkında

Yorum Yazın

Kaynaklar

Benzer Yazılar

Yazar Hakkında

Yorum Yazın