React Hooks + TypeScriptによるUseStateの基礎学習（配列）

はじめに

React Hooks + TypeScriptによるUseStateの基礎学習（配列）のアウトプットになります。
配列に対してuseStateをどのように使うか？の学習です。
前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（object）の続きからになります。

React Hooks + TypeScriptによるUseStateの基礎学習（object）

学習に使用した教材・参考資料

・[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発

ゴール

以下のように入力したボタンをクリックするとリストがブラウザに動的に反映させるようにします。

学習手順

1. 新しいコンポーネントを作る
2. 動作確認

ファイル構造

# react-ts-app

src
├── App.css
├── App.test.tsx
├── App.tsx　　　　　　　　　　　　　　　　　　　　　　　　　<-- 内容を Hello2 に変更する
├── components
│   ├── Hello1.tsx
│   └── Hello2.tsx       <-- Hello2.tsxを作成
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

1. 新しいコンポーネントを作る

---

App.tsx

react-ts-app -> App.tsx を開いて以下の <Hello1 /> から <Hello2 /> に変更する

# App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Hello2 from './components/Hello2';



function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Hello2  />          <-- Hello1 から Hello2 に変更
        
      </header>
    </div>
  );
}

export default App;

Hello2.tsx

react-ts-app -> src -> components フォルダの中に Hello2.tsx ファイルを作成してコードは以下のように記述する。
{useState} をインポートする、type Products で型を定義している。
useStateを定義して、更新する為の関数を作って初期値は空([])にする。
<button>に動的に変更を加えるイベントを追加する
<ul>に配列を展開する .map で一つづつとりだして key= で展開する
newProducts関数を定義する、<button> が押された時に発火する、… で要素をつなげて表示し、id: の .length で要素数を表示させて、name で "Hello React" を表示させる。

# Hello2.txt

import React, {useState} from 'react'     //<-- useState をインポート


type Products = {　　　　　　　　　　//<-- 型を定義
  id: number,
  name: string
};

const Hello2 = () => {

  const [products, setProducts] = useState<Products[]>([]);   //<-- useState を定義
  const newProducts = () => {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//<-- newProducts関数を定義
    setProducts([...products,{
      id: products.length,
      name: "Hello React"
    }])
  };
  return (
    <div>
　　　　　　　　　<button onClick={newProducts}>Add New Product</button>　　　　　//<-- ボタンを定義して配列の要素を動的に加えるイベントを作成する
        <ul>
          {products.map(product => (　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//<-- 配列の要素を展開してリスト表記する
            <li key={product.id}>{product.name} id: {product.id}</li>
          ))}
        </ul>
    </div>
  )
}

export default Hello2

2. 動作確認

---

localhost:3000 に接続して以下のうように動作すれば成功！

さいごに

---

useStateでの配列の扱い方の学習でした。
次回はUseEffectのについてです。