[React] 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をインポートする
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>
        </>
    )
}

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;

npm start

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>
        </>
    )
}

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;

npm start

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>
        </>
    )
}

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;

npm start