React'ta State Kullanımı

Ürün adını içeren bir state oluşturmak için useState fonksiyonunu kullanalım:

const state = useState('prod');

Sonuç olarak state sabiti, ilk elemanında ürün adının depolandığı, ikinci elemanında ise adı değiştirmek için bir fonksiyon bulunan bir dizi olacaktır:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Kısalık için genellikle dizi için ara sabit kullanılmaz, bunun yerine destructuring kullanılır:

const [name, setName] = useState('prod');

Şimdi ürün adıyla ilgili state'imizi bir yere yazdıralım:

return <p>
	<span>{name}</span>
</p>;

Hepsini bir araya getirelim ve aşağıdaki kodu elde edelim:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

Bu kodu çalıştırırsak, başlangıçta div'in içinde state'in başlangıç değeri görüntülenecektir, bizim durumumuzda 'prod'. setName fonksiyonu ile state değiştirildiğinde, yeni state değeri otomatik olarak görüntülenecektir.

Ekranda kullanıcı verilerini görüntülemek istediğinizi varsayalım: adı, soyadı, yaşı. Bunun için uygun başlangıç değerlerine sahip state'ler oluşturun.