■P091

────────────────
const [state, setState] = useState(initialValue);
────────────────

────────────────
// stateの初期値はundefined
const [state, setState] = useState();
────────────────

────────────────
setState(newValue);
────────────────


■P092

────────────────
import { useState } from "react";

const DisplayValue = () => {
  const [value, setValue] = useState("");

  const handleChange = e => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={handleChange}
      />
      <p>入力された値: {value}</p>
    </div>
  );
};

export default DisplayValue;
────────────────


■P094

────────────────
import { useState } from "react";

const TermsAgreementForm = () => {
  const [isAgreed, setIsAgreed] = useState(false);

  const handleChange = e => {
    setIsAgreed(e.target.checked);
  };

  const handleSubmit = e => {
    // フォームのデフォルト動作であるページリロードを防ぐ
    e.preventDefault();
    alert("利用規約に同意してフォームを送信しました！");
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input
          type="checkbox"
          checked={isAgreed}
          onChange={handleChange}
        />
        利用規約に同意する
      </label>
      <br />
      <button type="submit" disabled={!isAgreed}>
        送信
      </button>
    </form>
  );
};

export default TermsAgreementForm;
────────────────


■P096

────────────────
import { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      {count}回押しました
    </button>
  );
};

export default Counter;
────────────────


■P097

────────────────
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};
────────────────


■P098

────────────────
const handleClick = () => {
  setCount(count + 1); // setCount(10 + 1)
  setCount(count + 1); // setCount(10 + 1)
};
────────────────

────────────────
const handleClick = () => {
  setCount((prev) => prev + 1); // setCount(10 + 1)
  setCount((prev) => prev + 1); // setCount(11 + 1)
};
────────────────


■P099

────────────────
const [user, setUser] = useState({
  name: "太郎",
  age: 20
});
────────────────

────────────────
const handleChange = () => {
  setUser((prev) => ({
    ...prev, // 元の情報をコピー
    age: prev.age + 1 // ageだけ上書き
  }));
};
────────────────

────────────────
const [tasks, setTasks] = useState(["タスク1", "タスク2"]);

const handleAdd = (newTask) => {
  setTasks((prev) => [...prev, newTask]);
};
────────────────

