Sử dụng useState() Hook cho xử lý State

Khởi tạo State

useState cho phép chúng ta khai báo local state trong Function Component cách mà trước để chỉ dùng cho Class Component.

const [state, setState] = useState(initStateValue)

• state: định nghĩa tên của state nó có thể là đơn giá trị hoặc object,.. (là tham số của useState)

• setState: định nghĩa tên function dùng cho việc update state (là tham số của useState)

• initialStateValue: là giá trị ban đầu của state. Ví dụ:

const Project=() => {
  const [count, setCount] = useState(0)
  const handleClick = () => setCount(age + 1)

  return (
    <div>
      Current count {count}.
      <div>
        <button onClick={handleClick}>Increment Count!</button>
      </div>
    </div>
  )
}

• Như ví dụ thì bạn thấy ban đầu bạn khởi tạo state có tên là count với giá trị ban đầu là 0. Thì count ở đây là state name và là tham số đầu tiên của hàm useState và tham số thứ 2 sẽ hàm function setCount hàm xử lý khi mỗi lần ta nhấn click thì giá trị của state sẽ được tăng lên một. Công việc xử lý tăng lên 1 nó tương đương với hàm setState trong Class Components.

• Vậy đó là cách khai báo cũng như cách update một state trong Function Component vậy nếu 1 Function Component có nhiều state thì sao?

Khai bao nhiều state cho Function Components

• Thực ra khá đơn giản ta chỉ cần thêm N hàm useSate thôi.

const [state1, setState1] = useState(initialStateValue1)
const [state2, setState2] = useState(initialStateValue2)