import React, {useState} from 'react'

function HookCounterThree() {
  
  const[name, setName]= usestate({ firstName:'', lastName:'' })
  return (
    <form>
 //can overwrite previously entered input
      <input type="text" value={name.firstName} onChange={e =>setName({firstName:e.target.value})/>
      <input type="text"value={name.lastName} onChange={e =>setName({lastName:e.target.value})/>
//fixed using the spread operator
         <input type="text" value={...name.firstName} onChange={e =>setName({firstName:e.target.value})/>
      <input type="text"value={...name.lastName} onChange={e =>setName({lastName:e.target.value})/>
      <h2> Your first name is {name.firstName}</h2>
      <h2> Your last name is {name.lastName}</h2>
    </form>
  )
}
export default HookCounterThree