INDEX
はじめに
![](https://techlog.site/wp-content/uploads/2024/02/nwe_icon.jpeg)
useStateを学習しました!
その結果を執筆します。
[前提条件] ファイル構成
src
├── components
│ ├── useState01.tsx
│ ├── useState02.tsx
│ └── useState03.tsx
├── App.css
├── App.test.tsx
├── App.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts
基本
useStateの基本分法は下記の通りになります。
const [状態, 状態更新関数] = useState<型>(初期値);
使い方
1. useStateで数値を扱う
1. useStateを使ったコンポーネントを作成する
// useStateをインポートする
import React, {useState} from "react";
export const State = () => {
// 初期値を0とする
const [count, setCount] = useState(0)
return (
// <>: React Fragmentで外側を囲む必要あり
<>
// 現在のステータスを表示
<p>Count: {count}</p>
// クリックしたらsetCountを使い、前回の値を(preCount)に`+1`をする
<button onClick={() => {setCount(preCount=>preCount+1)} }>+ 1</button>
// クリックしたらsetCountを使い、初期値に戻す
<button onClick={() => {setCount(0)} }>reset</button>
</>
)
}
2. 自作コンポーネントを`App.tsx`に追加し反映する
import React from 'react';
import logo from './logo.svg';
import './App.css';
// 自作コンポーネントをインポート
import { Satate } from './components/useState01';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
// 自作コンポーネントの追加
<State />
</header>
</div>
);
}
export default App;
3. Reactを起動する
npm start
4. 動作確認
+1ボタンでカウントが増えるか確認する
変更前
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step01-1024x576.png)
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step01-1024x576.png)
変更後
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step02-1024x576.png)
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step02-1024x576.png)
2. useStateでObjectを扱う
1. useStateを使い、扱うデータをObjectでコンポーネントを作成する
import React, {useState} from "react";
export const SatateObject = () => {
// name, ageのキーを持つオブジェクトを初期値にする
const [profile, setProfile] = useState({name: '', age: ''})
return (
<>
<form>
// nameを入力する欄を作成する
// 入力に変化がある場合(onChange)、setProfileを使い入力値(event.target.value)をprofileに設定する
// ...profile: 変更するキー以外は現在値のままにする指定にする
<input type='text' value={profile.name}
onChange={event => setProfile({...profile, name: event.target.value})}/>
<input type='text' value={profile.age}
onChange={event => setProfile({...profile, age: event.target.value})}/>
</form>
// useStateを使ったprofileのnameを表示する
<p>Name: {profile.name}</p>
// useStateを使ったprofileのageを表示する
<p>Age: {profile.age}</p>
</>
)
}
2. 自作コンポーネントをApp.tsxに追加し反映する
import React from 'react';
import logo from './logo.svg';
import './App.css';
// 自作コンポーネントをインポート
import { SatateObject } from './components/useState02';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
// 自作コンポーネントの追加
<SatateObject />
</header>
</div>
);
}
export default App;
3. Reactを起動する
npm start
4. 動作確認
- 左の入力欄(Name)に適当な文字を入力し、Name:の右隣に即座に文字が表示される事を確認する
- 右の入力欄(Age)に適当な文字を入力し、Age:の右隣に即座に文字が表示され、Name:の右隣にされている文字はそのままであること
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step03-1024x576.png)
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step03-1024x576.png)
3. useStateで配列を使う
1. useStateを使い、扱うデータをListでコンポーネントを作成する
import React, {useState} from "react";
export const SatateList = () => {
// 空の配列を初期値にする
const [taskList, setTaskList] = useState([])
// ボタンをクリックされた配列に要素を1足す関数を作成する
const addTask = () => {
setTaskList([...taskList, {
id: taskList.length
}])
}
return (
<>
<button onClick={addTask}>Add Task</button>
<ul>
// mapを使い、<li>をの要素を作成する
{taskList.map(task => (
<li key={task.id}>Task{task.id}</li>
))}
</ul>
</>
)
}
2. 自作コンポーネントをApp.tsxに追加し反映する
import React from 'react';
import logo from './logo.svg';
import './App.css';
// 自作コンポーネントをインポート
import { SatateList } from './components/useState03';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
// 自作コンポーネントの追加
<SatateList />
</header>
</div>
);
}
export default App;
3. Reactを起動する
npm start
4. 動作確認
下記の画像のように表示される事を確認する
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step04-1024x576.png)
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step04-1024x576.png)
Add Taskを3回クリックして 下記の画像のように表示される事を確認する
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step05-1024x576.png)
![](https://techlog.site/wp-content/uploads/2024/03/react-usestate-step05-1024x576.png)