/Javascript/React/Get input value in react using hooks

Get input value in react using hooks

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>
    </>
    )
}

Source: stackoverflow.com

Similar codes

24 votes180 views6 answers
React native navigation
Javascript React
0 vote252 views1 answer
State creation in class components reactjs interview questions
Javascript React
0 vote218 views1 answer
Javascript array filter duplicates in react
Javascript React
0 vote195 views1 answer
Slide hide animaition in react
Javascript React
0 vote381 views1 answer
How to place text over image in react
Javascript React
23 votes298 views2 answers
Reactjs app change port
Javascript React
0 vote233 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
0 vote227 views1 answer
Javascript react reverse map
Javascript React
16 votes220 views1 answer
Deploy react app netlify
Javascript React
26 votes260 views6 answers
React redirect to url
Javascript React