How to get the value of an input field in React.js

How to get the value of an input field in React.js:

In this post, we will learn how to get the value of an input field in React.js. Input fields are used to get text inputs from the user. In react, if you want to get the user input text, you need to use state.

In this post, I will show you how to do that in two different ways. By using state and by using react hooks.

Create a react app:

This step will show you how to create a new reactjs app. You can skip it if you are working on an existing app. Let’s create a react app to use in this example:

npx create-react-app myapp

It will create a new Reactjs app myapp. Open that folder in your favorite editor.

Inside the project, you will see a src folder and in that folder you will find a file called App.js.

We will edit this file in this example.

Open a terminal, go to this folder and run yarn start. It will start the app in localhost:3000.

Method 1: Get the value using state:

Let’s change the App.js file as like below:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputText: "" };
  }

  render() {
    return (
      <div style={{ marginTop: "10%", textAlign: "center" }}>
        <input
          value={this.state.inputText}
          onChange={(e) => this.setState({ inputText: e.target.value })}
        />
        <button onClick={() => alert(this.state.inputText)}>Click me</button>
      </div>
    );
  }
}

export default App;

Here,

App is a class component.
We are initializing a state variable inputText as empty string in the constructor.
The is an input component and a button component.
The value of the input component is inputText and we are changing the value of inputText if user types anything. So, the value is read from the state and it is updated to the state.
On clicking the button, it shows an alert that shows the value of inputText.

If you run this, it will show one input component with a button. You can enter anything in the input box and click on the button. It will show an alert with the text that is entered in the input box.

Method 2: By using hooks and functional component:

We can also use hooks to do the same.

import React, { useState } from "react";

function App() {
  const [inputText, setInputText] = useState("");

  return (
    <div style={{ marginTop: "10%", textAlign: "center" }}>
      <input value={inputText} onChange={(e) => setInputText(e.target.value)} />
      <button onClick={() => alert(inputText)}>Click me</button>
    </div>
  );
}

export default App;

Here, we are using useState hooks to initialize inputText as an empty string. The value of the input is set as inputText and it is calling setInputText to set inputText.

Use a different function:

You can always use a separate function. This is a good idea because you can move the logical part out of the UI components. For example:

import React, { useState } from "react";

function App() {
  const [inputText, setInputText] = useState("");

  const changeText = (e) => {
    setInputText(e.target.value);
  }
  
  return (
    <div style={{ marginTop: "10%", textAlign: "center" }}>
      <input value={inputText} onChange={changeText} />
      <button onClick={() => alert(inputText)}>Click me</button>
    </div>
  );
}

export default App;

CodeVsColor

How to get the value of an input field in React.js