複数の入力情報を１つの変数で管理

App.js
    import "./App.css";
    import { useState } from "react";
    
    const initialState = {
      name: "",
      email: "",
      contact: "",
    };
    
    function App() {
      const [state, setState] = useState(initialState);
    
      const { name, email, contact } = state;
    
      const handleInputChange = (e) => {
        const { name, value } = e.target;
        setState({ ...state, [name]: value });
// setState((prev) => ({ ...prev, [name]: value }));
      };
    
      console.log(state);
    
      return (
        <div className="App">
          <form
            action=""
            style={{
              display: "flex",
              flexDirection: "column",
              margin: "auto",
              padding: "15px",
              maxWidth: "400px",
              alignContent: "center",
            }}
          >
            <label htmlFor="name">Name</label>
            <input
              type="text"
              id="name"
              name="name"
              placeholder="Your name ..."
              value={name || ""}
              onChange={handleInputChange}
            />
    
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Your email ..."
              value={email || ""}
              onChange={handleInputChange}
            />
    
            <label htmlFor="contact">Contact</label>
            <input
              type="number"
              id="contact"
              name="contact"
              placeholder="Your contact No..."
              value={contact || ""}
              onChange={handleInputChange}
            />
          </form>

          <pre>{JSON.stringify(state, null, "\t")}</pre>
        </div>
      );
    }
    
    export default App;
複数の入力情報を１つの変数で管理

ブラウザ表示
