Sử dụng State trong React

Hãy sử dụng hàm useState để tạo một state chứa tên sản phẩm:

const state = useState('prod');

Kết quả là hằng số state sẽ là một mảng, phần tử đầu tiên của nó sẽ chứa tên sản phẩm, và phần tử thứ hai - hàm để thay đổi tên:

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

Để ngắn gọn, người ta thường không sử dụng hằng số trung gian cho mảng, mà sử dụng destructuring:

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

Bây giờ hãy hiển thị state với tên sản phẩm của chúng ta trong một phần markup nào đó:

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

Tổng hợp tất cả lại, chúng ta có đoạn mã sau:

import React, { useState } from 'react';

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

export default App;

Nếu chạy mã này, ban đầu trong thẻ div sẽ hiển thị giá trị ban đầu của state, trong trường hợp của chúng ta là 'prod'. Khi thay đổi state thông qua hàm setName, giá trị mới của state sẽ tự động xuất hiện trong phần markup.

Giả sử bạn muốn hiển thị trên màn hình dữ liệu của người dùng: tên, họ, tuổi của họ. Hãy tạo các state tương ứng với giá trị ban đầu cho việc này.