react hooks based controlled form

form-with-hooks.jsx

import React , {useState} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const defaultFormState = {
    first: '',
    second: '',
    third: '',
    fourth: ''
  }

  const [inputs, setInputs] =  useState(defaultFormState)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input name="first" value ={inputs.first} onChange= {(e)=>setInputs({...inputs, [e.target.name]: e.target.value})} />
      <input name="second" value = {inputs.second} onChange= {(e)=>setInputs({...inputs, [e.target.name]: e.target.value})} />
      <input name="third" value = {inputs.third} onChange= {(e)=>setInputs({...inputs, [e.target.name]: e.target.value})} />
      <input name="fourth" value = {inputs.fourth} onChange= {(e)=>setInputs({...inputs, [e.target.name]: e.target.value})} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);