How to Get Input Box Value in React JS?

Oct 04, 2022 . Admin

Hello,

I am going to explain to you example of how to get input box value in react js. This article goes in detailed on how to get input field value in react js. I explained simply about react js get input value. This article will give you a simple example of react js get input value on button click.

In this example, i will show you how to get input box value in react js. we will create form with "name" and "email" input box. Then we will get input fields value on form submit. so, let's see the simple example

Step 1: Create React JS App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app reactjs-my-example
Step 2: Install Bootstrap

In this step, we will install bootstrap npm package to use design css. let's run below command:

npm install bootstrap --save
Step 3: Create Form.js Component

Here, we will create Form.js component and make form. Then we will add form with "name" and "email" input fields. so let's update code on following file.

src/Form.js
import React from 'react';
 
class Form extends React.Component {
  
  state = {
    name: '',
    email: ''
  };
  
  /*------------------------------------------
  --------------------------------------------
  handleChange() Code
  --------------------------------------------
  --------------------------------------------*/
  handleChange = (event) => {
    const input = event.target;
    const value = input.value;
 
    this.setState({ [input.name]: value });
  };

  /*------------------------------------------
  --------------------------------------------
  handleFormSubmit() Code
  --------------------------------------------
  --------------------------------------------*/
  handleFormSubmit = (e) => {
    e.preventDefault();

    const inputData = this.state;
    console.log(inputData);
  };
 
  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <label>
            Name: <input name="name" className="form-control" value={this.state.name} onChange={this.handleChange}/>
          </label>
          <label>
            Email: <input name="email" className="form-control" value={this.state.email} onChange={this.handleChange}/>
          </label>
          <button type="submit" className="btn btn-success  ">Submit</button>
        </form>
      </div>
    )
  }
}
 
export default Form;
Step 4: Update App.js File

Here, we will update our App.js file code. we will import Form component and import bootstrap for design. so let's update code on App.js file.

src/App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import Form from './Form';

function App() {

  return (
    <div className="App container">
      <h1>How to Get Input Box Value in React JS? - MyWebtuts.com</h1>

      <Form />

    </div>
  );
}

export default App;
Step 5: Run React JS App

In the last step run your project using bellow command.

npm start
Output

I hope it can help you...

#React JS