<div id="root">
</div>

#container {
  font-size: 1.5em;
  display: flex;
  flex-direction: column;
}

input[type="text"]{
  margin-left: 10px;
  font-size: 0.8em;
}

const EditPage = () => {
  const [ state, setState ] = React.useState(JSON.parse(localStorage.getItem('formData')) || {})
 
  const handleChange = (e) => {
    let name = event.target.name
    let value = event.target.type === "checkbox" ? 
        event.target.checked : 
        event.target.value
    debugger
    let newState = { ...state, [name]: value } 
    localStorage.setItem('formData', JSON.stringify(newState))
    setState(newState)
  }
  
  return ( 
    <div id="container">
        <label htmlFor="full_name">
          Full Name: 
          <input 
            type="text"
            name="full_name"
            placeholder="First Middle Last"
            value={state.full_name}
            onChange={handleChange}
           />
        </label>
      <p>Handedness:</p>
        <label htmlFor="left-handed">
          <input 
            type="checkbox"
            name="left-handed"
            value={state.left_handed}
            onChange={handleChange}
           />Left-Handed
        </label>
        
        <label htmlFor="left-handed">
          <input
            type="checkbox"
            name="right-handed"
            value={state.right_handed}
            onChange={handleChange}
           />Right-Handed
        </label>
    </div>
  )
}

          
ReactDOM.render(<EditPage />, document.getElementById("root"))