React Hooksで複数のFormを扱う

const Forms: React.FC = () => {
  const [inputTexts, setInputTexts] = useState({
    firstName: '', lastName: '', e_mail: '', password: ''
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputTexts({ ...inputTexts, [e.target.name]: e.currentTarget.value })
  }

  return (
    <div>
      {Object.entries(inputTexts).map(([key, value]) =>
        return <input type="text" key={key} name={key} value={value} onChange={handleChange} />
      )}
    </div>
  )
}

• stateを一括りにまとめる
• Object.entriesで 各keyとvalueを取得
• inputタグのnameにkeyを指定 → onChangeのevent.target.nameでkeyを取得