【React】useState

import { useState } from "react";

const Example = () => {
// [State値を格納する変数、　Stateを更新するための関数]
// 更新関数はStateの状態を更新するために使用
  let [val, setVal] = useState();

  return (
    <>
      <input
        type="text"
        // 入力値をsetVal()へ渡しvalを更新
        onChange={(e) => {
          setVal(e.target.value);
        }}
      />
      = {val}
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const countUp = () => {
　　// ２回呼び出されるが、どちらも初期値0を使用しているため結果は1となる
    setCount(count + 1);
    setCount(count + 1);
  };
  return (
    <>
      <p>現在のカウント数: {count}</p>
      <button onClick={countUp}>+</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const countUp = () => {
    setCount(count + 1);
　　　// 前回更新された1が入ってくるため、結果は2となる
    setCount(prevstate => prevstate + 1);
  };
  return (
    <>
      <p>現在のカウント数: {count}</p>
      <button onClick={countUp}>+</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const personObj = { name: "Tom", age: 18 };
  const [person, setPerson] = useState(personObj);
  const changeName = (e) => {
　　 //　渡す値は新しく生成したオブジェクトでないといけないため、下記の書き方だと値が変わったと認識されず動かない。
    // person.name = e.target.value;
    // setPerson(person);

　　// スプレッド構文を使用し、変更したプロパティのみ上書き
    setPerson({ ...person, name: e.target.value });
  };
  const changeAge = (e) => {
    setPerson({ ...person, age: e.target.value });
  };
  const reset = () => {
    setPerson({ name: "", age: "" });
  };

  return (
    <>
      <h3>Name: {person.name}</h3>
      <h3>Age: {person.age}</h3>
      <input type="text" value={person.name} onChange={changeName} />
      <input type="number" value={person.age} onChange={changeAge} />
      <button onClick={reset}>リセット</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const numArray = [1, 2, 3, 4, 5];
  const [nums, setNums] = useState(numArray);
  const shuffle = () => {
　　// 下記だとうまくいかない、スプレッド構文で配列を展開して新しい配列として渡してあげる必要がある
　　// const newNums = nums

    const newNums = [...nums];
    const value = newNums.pop();
    newNums.unshift(value);
    setNums(newNums);
  };
  return (
    <>
      <h1>{nums}</h1>
      <button onClick={shuffle}>shuffle</button>
    </>
  );
};

export default Example;

import { useState } from "react";

const Example = () => {
  const [toggle, setToggle] = useState(0);
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const toggleComponent = () => {
    setToggle((prev) => !prev);
  };
  return (
    <>
     // トグルボタンによって表示非表示を設定。非表示にした際にリセットさせずに値を保持させておきたい
      <button onClick={toggleComponent}>toggle</button>
      {toggle ? (
        <Count key="A" title="A" count={countA} setCount={setCountA} />
      ) : (
        <Count key="B" title="B" count={countB} setCount={setCountB} />
      )}
    </>
  );
};

const Count = ({ count, title, setCount }) => {
  const countUp = () => {
    setCount(count + 1);
  };
  const countDown = () => {
    setCount(count - 1);
  };
  return (
    <>
      <p>
        {title}: {count}
      </p>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </>
  );
};

export default Example;