How To Get Input Field Value On Button Click In React-js ? | Functional Component | When Click On Button In React Js

How To Get Input Field Value On Button Click In React-js?


<div id="root"></div>


import React, { ComponentuseRef } from 'react';
import { render } from 'react-dom';

import InputField from './inputfield';

import './style.css';

function App() {
  const nameForm = useRef(null);

  const handleClickEvent = () => {
     const form = nameForm.current
     alert(`${form['firstname'].value} ${form['lastname'].value}`)

  return (
      <form ref={nameForm}>
       <InputField label={'first name'} name={'firstname'}/>
       <InputField label={'last name'} name={'lastname'}/>
      <button onClick={handleClickEvent}>Get value</button>

render(<App />document.getElementById('root'));


import React, { ComponentuseState } from 'react';
import { render } from 'react-dom';

export default function InputField({ namelabel }) {
  const [statesetState] = useState('');
  return (
        onChange={(e=> setState(}


  "dependencies": {
  "scripts": {
    "start""react-scripts start",
    "build""react-scripts build",
    "test""react-scripts test --env=jsdom",
    "eject""react-scripts eject"
  "devDependencies": {


h1p {
  font-family: Lato;

React Get Input Value On Button Click Functional Component 

  • How Get Data From Input Field In React Js Functional Component?
  • How Add Input Field Dynamically When Click On Button In React Js?
  • How Do You Call A Component On Button Click In React?
  • How Do You Get The Input Value From A Hook In React?

This is the quickest way to get started! First, open this Starter Code in a new tab. The new tab should display an empty tic-tac-toe game board and React code. You may not use the ref attribute on function components because function is letest 

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.