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イベントが発火してカウントアップされます。

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^