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
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter