ネストされたオブジェクトのキーをinputタグのname属性に入れる方法

ネストされたオブジェクトのキーをinputタグのname属性に入れる場合、キーをドット（.）で連結する方法が一般的です。以下に例を示します。

App.js

    const [form, setForm] = useState({
      personalInfo: {
        firstName: "",
        lastName: "",
      },
      contactInfo: {
        email: "",
      },
    });
    
    const handleFormChange = (e) => {
      const { name, value } = e.target;
      const [parentKey, childKey] = name.split("."); // ドットでキーを分割
      setForm((prev) => ({
        ...prev,
        [parentKey]: {
          ...prev[parentKey],
          [childKey]: value,
        },
      }));
    };
    
    return (
      <form>
        <input
          type="text"
          name="personalInfo.firstName"
          value={form.personalInfo.firstName}
          onChange={handleFormChange}
        />
        <input
          type="text"
          name="personalInfo.lastName"
          value={form.personalInfo.lastName}
          onChange={handleFormChange}
        />
        <input
          type="text"
          name="contactInfo.email"
          value={form.contactInfo.email}
          onChange={handleFormChange}
        />
      </form>
    );

上記の例では、ネストされたオブジェクトのキーをドットで連結してname属性に設定しています。handleFormChange関数では、name属性からドットで分割して親キーと子キーを取得し、正しい場所に値を更新しています。

このようにすることで、ネストされたオブジェクトの値を正しく更新することができます。