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

はじめに

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

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

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

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

ゴール

以下のように入力したテキストをブラウザに動的に反映させるようにします。

学習手順

1. useStateのobjectを作成
2. 動作確認

1. useStateのobjectを作成

---

App.tsxを以下のように変更する。
<Hello1 text………>を改変削除。

# App.tsx
# 変更前

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

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <Hello1 text="Today" />    
       <Hello1 text="everyone" />　　　
     </header>
   </div>
 );
}

export default App;


////////////////////////////////////////////////////////////////////////////////////


# 変更後


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

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <Hello1 />    //<-- 改変
                     //<-- 削除
     </header>
   </div>
 );
}

export default App;

Hello1.tsx　変更前

# Hello1.tsx
# 変更前

import React, {useState} from 'react';

type Props = {
  text: string
}

const Hello1 = (props:Props) => {
  const clickHandler = () => {
      console.log('clicked')
  }

  const [count, setCount] = useState(0)

  return <div>
            <button onClick={() => {setCount(prevCount=>prevCount+1); setCount(prevCount=>prevCount+1);} }>Count {count}</button>    //<-- setCount(prevCount=>prevCount+1)を２つ作成
            <h1>Hello {props.text} </h1>
            <h1>Hello World2</h1>
         </div>;
};

export default Hello1;

Hello1.tsx 変更後
useStateを初期化する。
<form><input>から入力された値を動的にブラウザに反映される処理をさくせいする。
onChangeは入力に変更が加わった時に実行される、
setProducts関数の[…]はオブジェクト内の入力要素を分解して、新しい値をセットしている。

# Hello1.tsx
# 変更後

import React, {useState} from 'react';

type Props = {
  text: string
}

const Hello1 = () => {                    //<-- 改変 
                                          //<-- 削除 

  const [product, setProducts] = useState({name: '', price: ''})　     //<-- 初期化

  return <div>
    　　　　　　　　　　　　　　<form>
              <input type='text' value={product.name}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//<-- 改変と削除
              onChange={evt => setProducts({...product, name: evt.target.value})}/>

              <input type='text' value={product.price}
              onChange={evt => setProducts({...product, price: evt.target.value})}/>

            </form>
            <h3>Product name is {product.name}</h3>
            <h3>Product price is {product.price}</h3>    
         </div>;
};

export default Hello1;

2. 動作確認

---

localhost:3000に接続して値を入力して動的にブラウザに反映されていれば成功！

さいごに

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