Penggunaan State dalam React

Mari gunakan fungsi useState untuk membuat state yang mengandungi nama produk:

const state = useState('prod');

Hasilnya, pemalar state akan mewakili array, di mana elemen pertama akan menyimpan nama produk, dan yang kedua - fungsi untuk menukar nama:

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

Untuk ringkasnya, biasanya pemalar perantaraan untuk array tidak digunakan, sebaliknya menggunakan destrukturisasi:

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

Sekarang mari kita paparkan state dengan nama produk kita dalam beberapa markup:

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

Mari kumpulkan semuanya dan dapatkan kod berikut:

import React, { useState } from 'react';

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

export default App;

Jika kod ini dijalankan, pada mulanya dalam div akan terpapar nilai awal state, dalam kes kita 'prod'. Apabila state ditukar melalui fungsi setName, nilai baru state akan muncul secara automatik dalam markup.

Katakan anda ingin memaparkan data pengguna pada skrin: nama, nama keluarga, umur. Buat state yang sesuai dengan nilai awal untuk ini.