State Nedir?
State, bir bileşenin içindeki durumu (state) tutmak ve yönetmek için kullanılan bir kavramdır. Durum, bileşenin değişken verilerini temsil eder ve bileşenin UI’sini güncellemek için kullanılır.
State Kullanımı:
import React, { useState } from 'react';
const ToggleButton = () => {
const [isOn, setIsOn] = useState(false);
const toggle = () => {
setIsOn(prevState => !prevState);
};
return (
<div>
<h2>Toggle Button</h2>
<button onClick={toggle}>{isOn ? 'Kapat' : 'Aç'}</button>
<p>Durum: {isOn ? 'Açık' : 'Kapalı'}</p>
</div>
);
}
export default ToggleButton;
Bu örnekte, ToggleButton
adında bir işlevsel bileşen oluşturduk. useState
kancasını kullanarak isOn
adında bir durum değişkeni ve setIsOn
adında bir durum güncelleme fonksiyonu tanımladık. İlk değeri false
olarak ayarladık.
toggle
adında bir fonksiyon oluşturduk. Bu fonksiyon, her tıklamada setIsOn
fonksiyonunu kullanarak isOn
durumunu tersine çevirir.
Bileşen, state değişkenini kullanarak bir başlık, açma/kapatma düğmesini ve durumu gösteren bir paragrafı içeren bir UI döndürür.
Bileşeni kullanmak için başka bir bileşende (örneğin, App
bileşeninde) ToggleButton
bileşenini kullanabilirsiniz:
import React from 'react';
import ToggleButton from './ToggleButton';
const App = () => {
return (
<div>
<h1>React Uygulaması</h1>
<ToggleButton />
</div>
);
}
export default App;
Bu örnekte, App
adında bir işlevsel bileşen oluşturduk ve ToggleButton
bileşenini içine ekledik. App
bileşeni, bir başlık ve ToggleButton
bileşenini içeren bir UI döndürür.
Durum, bileşenlerin dinamik ve etkileşimli olmasını sağlar. Bu sayede bileşenler, kullanıcı etkileşimlerine yanıt verebilir ve UI’yi güncelleyebilir.
Bir de class component örneği verelim:
import React from 'react';
class ToggleButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isOn: false
};
}
toggle = () => {
this.setState(prevState => ({
isOn: !prevState.isOn
}));
};
render() {
const { isOn } = this.state;
return (
<div>
<h2>Toggle Button</h2>
<button onClick={this.toggle}>{isOn ? 'Kapat' : 'Aç'}</button>
<p>Durum: {isOn ? 'Açık' : 'Kapalı'}</p>
</div>
);
}
}
export default ToggleButton;
Bu örnekte, ToggleButton
adında bir sınıf bileşeni oluşturduk. this.state
nesnesini kullanarak isOn
adında bir state değişkeni tanımladık ve başlangıç değerini false
olarak ayarladık.
toggle
adında bir fonksiyon oluşturduk. Bu fonksiyon, this.setState
yöntemini kullanarak isOn
durumunu tersine çevirir.
render
yöntemi, bileşenin UI’sini döndürür. Durum değişkenini kullanarak bir başlık, açma/kapatma düğmesini ve durumu gösteren bir paragrafı içeren bir UI oluşturulur.
Bileşeni kullanmak için başka bir bileşende (örneğin, App
bileşeninde) ToggleButton
bileşenini kullanabilirsiniz:
import React from 'react';
import ToggleButton from './ToggleButton';
class App extends React.Component {
render() {
return (
<div>
<h1>React Uygulaması</h1>
<ToggleButton />
</div>
);
}
}
export default App;