Reaktivitas State di React

Sekarang mari kita lihat bagaimana reaktivitas bekerja. Reaktivitas memastikan bahwa perubahan pada state langsung tercermin di layar.

Mari kita lihat sebuah contoh. Misalkan kita memiliki state dengan nama produk:

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

Tampilkan nama produk dalam markup:

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

Sekarang buat tombol yang, ketika ditekan, akan mengubah state kita:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Dalam penangan klik, gunakan fungsi setName untuk menetapkan nama baru ke produk:

function clickHandler() {
	setName('xxxx');
}

Mari satukan semua kode kita. Hasilnya adalah setelah tombol ditekan, teks akan langsung berubah ke nilai baru:

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

Penggunaan fungsi penangan terpisah tidak wajib. Anda bisa menggunakan fungsi panah anonim:

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

Diberikan state dengan nama depan dan belakang pengguna. Tampilkan dalam markup. Buatlah tombol untuk mengubah state-state tersebut.