Breaking News: Grepper is joining You.com. Read the official announcement!

get input value in react using hooks

Add Answer

Yeomeo answered on March 30, 2021 Popularity 10/10 Helpfulness 7/10

answer get input value in react using hooks

related Handle an input with React hooks

related Which React hook we use to get value from an input box?

get input value in react using hooks

Comment

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

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: get input javascript using

Link to this answer
Share Copy Link

Contributed on Mar 30 2021

Yeomeo

0 Answers Avg Quality 2/10

Closely Related Answers

Handle an input with React hooks

Comment

  const [inputValue, setInputValue] = React.useState("");

      const onChangeHandler = event => {
        setInputValue(event.target.value);
      };

      <input
        type="text"
        name="name"
        onChange={onChangeHandler}
        value={inputValue}
      />

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: handle ha

Link to this answer
Share Copy Link

Contributed on Aug 17 2021

Vivacious Vole

0 Answers Avg Quality 2/10

Which React hook we use to get value from an input box?

Comment

import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: get hook h

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

Fragile Flatworm

0 Answers Avg Quality 2/10

get input value in react using hooks

Contents

More Related Answers

get input value in react using hooks

Closely Related Answers

Handle an input with React hooks

Which React hook we use to get value from an input box?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.