React hook: useState แบบสั้นๆ

Web Development

React hook: useState แบบสั้นๆ

useState ก็เป็น hook ที่ไว้เก็บค่าใน React โดยในบทความนี้เราจะมาดูกันว่าจะใช้งานมันยังไงได้บ้าง

12 เดือนที่ผ่านมา

1 min read

useState เป็น Hook ที่ใช้ในการเพิ่ม state ให้กับ functional component โดยมันจะรับค่าเริ่มต้นเป็น argument และ return array ที่มีสอง element คือ ค่า state ปัจจุบัน และ function ในการอัพเดทค่า state

ตัวอย่างการใช้ useState ในการเพิ่ม counter ให้กับ functional component

import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>decrement</button>
    </div>
  );
}

ในตัวอย่างนี้เราจะเริ่มต้นด้วยค่า count เป็น 0 และอัพเดทค่าทุกครั้งที่มีการคลิกปุ่ม Increment และ decrement

Tags:

React