useState – 【React】

useState – 【React】

コンポーネントの状態をステートとして管理します。

イベントが発生したときにステート変数を更新してレンダリングを行います。

import { useState } from 'react';

useState

useState関数の第一引数が初期値になります。

useState関数の戻り値をデストラクチャリングして定義します。

const [count, setCount] = useState(0); // 初期値=0

countがステート変数(コンポーネントの状態を持つ変数)になります。

setCount関数はステート変数を更新する関数になります。

App.js

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const up = () => {
    setCount((prev)=> prev + 1)
  }
  return (
    <div className="App">
      <button onClick={up}>button</button>
      <p>{count}</p>
    </div>
  );
}

export default App;

ボタンを押すとonCllickイベントが発火してカウントアップされます。

サンプル

コメント

タイトルとURLをコピーしました