import React, {useState} from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   <>
     <h1>Counter App</h1>
     <p>{count}</p>
     <button onClick={() => setCount((prevCount) => prevCount + 1)}>count up!</button>
     <button onClick={() => setCount((prevCount) => prevCount - 1)}>count down!</button>
     <button onClick={() => setCount(0)}>reset!!!</button>
   </>
 );
}

export default Counter;

このサンプルコードでは変数count(初期値0)および関数コンポーネントsetCountを定義しています。

buttonタグでカウントアップ/カウントダウン/リセットの各ボタンを作成し、それぞれのボタンがクリックされた際にonClickイベントでsetCountをレンダリングし変数countの値の変化を表示しています。実際には以下のように変化しています。

カウントアップ

<ボタンクリック前>

<ボタンクリック後>

カウントダウン

リセット

入力値に更新する

ここではタグで入力した内容に書き換える機能を実装しています。

以下にサンプルコードを記載します。

import React, {useState} from 'react';

function Edit() {
 const [text, setText] = useState("");
 const [result, setResult] = useState("sample");

 return (
   <>
     <h1>Text Edit App</h1>
     <input type='text' value={text} onChange={(e) => setText(e.target.value)} />
     <button onClick={()=>setResult(text)}>更新</button>
     <button onClick={()=>setResult("sample")}>リセット</button>
     <p>{result}</p>
   </>
 );
}

export default Edit;

このサンプルコードではまずinputタグを用意し、文字列等を入力できるようにします。 inputタグ内のonChange関数によりsetTextがレンダリングされ入力された値を保持します。その後更新ボタンを押すことでsetResultがレンダリングされ、inputに入力された文字列に書き換えられます。

実際には以下のような画面になります。

更新

<入力前>

<入力し更新>

リセット

配列

配列を取り扱う上で以下の機能を実装しました。

inputタグで入力した値を配列に追加
配列の特定の値を削除

以下にサンプルコードを記載します。

import React, {useState} from 'react';

function Array() {
   const [num, setNum] = useState();
   const [result, setResult] = useState([]);

    return (
       <>
       <h1>Array Edit App</h1>

       <input type="number" value={num} onChange={(e) => setNum(e.target.value)} />
       <button onClick={()=>setResult([...result, num])}>追加</button>
       <div>
         <p>array</p>
         <p>{ result }</p>

         <h3>Array Edit</h3>
         <ul>
           {result.map((num, index) => (
             <li>
               { num }
               <button onClick={() => setResult(result.filter((n) => (n != num)))}>削除</button>
             </li>
           ))}
         </ul>
       </div>
       </>
   );
}

export default Array;

このサンプルコードでは配列への追加および削除を行っています。

配列への追加

inputタグで入力された値をonChangeによりレンダリングされたsetNumに保持します。

その後onClickを押すことでせtResultがレンダリングされ配列に追加されます。

[...result, num]では今までの配列(result)の末尾に入力値(num)を追加するということです。画面表示時にはmap関数を使い配列を一つずつ表示します。

DBのような形でkeyごとのinputを作成し、入力値を追加
削除の実装

以下にサンプルコードを記載します。

import React, {useState} from 'react';

function Object() {
   const [name, setName] = useState("");
   const [age, setAge] = useState();
   const [users, setUsers] = useState([]);

   return (
       <>
       <h1>Object Edit</h1>

       name : <input value={ name } onChange={(e) => setName(e.target.value)} />
       age : <input type="number" value={ age } onChange={(e) => setAge(e.target.value)} />
       <button onClick={() => setUsers([...users, { name: name, age: age}])}>追加</button>

       <ul>
         { users.map((user) => (
           <li>
             名前 : { user.name }, 年齢 : { user.age }
             <button id="obj_delete_btn" onClick={() => setUsers(users.filter((n) => (n != user)))}>削除</button>
           </li>
         ))}
       </ul>
       </>
   );
}

export default Object;

このサンプルコードではusersオブジェクトへの追加、削除を行っています。

追加および削除のやり方は配列と同じですがオブジェクトでは追加時のinputタグをkeyに合わせて用意する必要があります。

また表示する際には{ user.name }のように「オブジェクト名.key」とする必要があります。実際には以下のような画面になります。

追加

<初期値>

<入力し追加>

削除

シェアしてね〜🤞

React入門 useStateの使い方 変数・配列・オブジェクトを操作してみる

React入門 useStateの使い方　変数・配列・オブジェクトを操作してみる