Want to handle an input with React hooks? How about writing a reusable function that returns the input value and the itself:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React, {useState} from 'react' export default () => { const [fName, setfName] = useState(''); const [lName, setlName] = useState(''); const [phone, setPhone] = useState(''); const [email, setEmail] = useState(''); const submitValue = () => { const frmdetails = { 'First Name' : fName, 'Last Name' : lName, 'Phone' : phone, 'Email' : email } console.log(frmdetails); } return( <> <hr/> <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} /> <input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} /> <input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} /> <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} /> <button onClick={submitValue}>Submit</button> </> ) } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
