22. useState trong React JS

useState là một trong những React Hook cơ bản nhất, giúp bạn thêm trạng thái cục bộ vào các thành phần hàm trong React. Nó trả về một cặp giá trị: giá trị trạng thái hiện tại và hàm để cập nhật giá trị đó. Dưới đây là một ví dụ minh họa về cách sử dụng useState:

jsx

import React, { useState } from 'react';

function Counter() {
  // Khởi tạo giá trị trạng thái "count" ban đầu là 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

Trong ví dụ trên, useState(0) khởi tạo giá trị trạng thái ban đầu của biến count là 0. count là giá trị trạng thái hiện tại và setCount là hàm để cập nhật giá trị của count. Khi bạn nhấn vào các nút “Increment” hoặc “Decrement”, setCount sẽ được gọi để cập nhật giá trị count, dẫn đến việc hiển thị số được tăng hoặc giảm trên giao diện.

Với useState, bạn có thể tạo ra các trạng thái cục bộ cho các thành phần hàm của bạn, làm cho quản lý trạng thái trở nên dễ dàng hơn so với việc sử dụng class components và this.state.

Dưới đây là một ví dụ cụ thể hơn về cách sử dụng useState trong một ứng dụng React để tạo một danh sách công việc và cho phép người dùng thêm và xoá công việc:

jsx

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]); // Khởi tạo trạng thái tasks là một mảng rỗng

  const addTask = (newTask) => {
    setTasks([...tasks, newTask]); // Thêm một công việc mới vào mảng tasks
  };

  const removeTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index); // Lọc bỏ công việc tại index
    setTasks(newTasks);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          placeholder="Enter a new task"
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              addTask(e.target.value);
              e.target.value = '';
            }
          }}
        />
      </div>
    </div>
  );
}

export default TodoList;

Trong ví dụ này, useState được sử dụng để tạo trạng thái tasks là một mảng rỗng. Hàm addTask sử dụng setTasks để thêm một công việc mới vào danh sách công việc. Hàm removeTask sử dụng setTasks để loại bỏ công việc khỏi danh sách.

Khi người dùng nhập một công việc mới và nhấn Enter, công việc mới sẽ được thêm vào danh sách và danh sách công việc sẽ được hiển thị. Mỗi công việc sẽ đi kèm với một nút “Remove” để người dùng có thể xoá công việc khi cần.

Trong thực tế, việc sử dụng useState có thể được mở rộng để quản lý nhiều trạng thái và logic phức tạp hơn trong các ứng dụng React của bạn. Trên đây là giới thiệu về useState trong React JS.