Penggunaan State di React

Kita akan menggunakan fungsi useState untuk membuat state yang berisi nama produk:

const state = useState('prod');

Hasilnya, konstanta state akan merupakan array, di elemen pertama akan disimpan nama produk, dan di elemen kedua - fungsi untuk mengubah nama:

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

Untuk singkatnya biasanya tidak menggunakan konstanta perantara untuk array, tetapi menggunakan destructuring:

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

Sekarang mari kita tampilkan state dengan nama produk di dalam beberapa markup:

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

Mari kita kumpulkan semuanya dan dapatkan kode berikut:

import React, { useState } from 'react';

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

export default App;

Jika kode ini dijalankan, maka awalnya di div akan ditampilkan nilai awal state, dalam kasus kita 'prod'. Saat mengubah state melalui fungsi setName, di markup akan secara otomatis muncul nilai state yang baru.

Misalkan Anda ingin menampilkan di layar data pengguna: nama depan, nama belakang, usia. Buatlah state yang sesuai dengan nilai awal untuk ini.