ReactJS: Get form input value with useState hook

June 22, 2020 Linda Walker Loading... Post a comment

The simple example below shows you how to get the value from an input field in React.

Example

Create a brand new React app, delete everything in the App.js file, and add the code below:

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");

  const updateName = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <h1>Your Name: {name}</h1>
      <form>
        <input
          type="text"
          value={name}
          onChange={updateName}
          placeholder="Please enter your name"
        />
      </form>
    </div>
  );
};

export default App;

Try your work by running:

npm start
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles

0
Would love your thoughts, please comment.x
()
x