Forms and Controlled Components

Introduction

In any web application, forms are a crucial part of the user experience. In React, we can create forms using controlled components. In this article, we will explore how to create forms and controlled components in React using a simple example.

Code

Let's start with a simple React component that displays a form with an input field and a submit button:

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted with value:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={inputValue} onChange={handleInputChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

In the code above, we define a state variable inputValue using the useState hook. The initial value of this state variable is an empty string. We also define a function handleInputChange that updates the value of inputValue with the user's input.

The return statement of our component contains a form element that is bound to the handleSubmit function. We also include a label and an input element that is bound to the inputValue state variable. We attach an onChange event listener to the input element that calls the handleInputChange function whenever the user types something in the input field. We then display a submit button that triggers the handleSubmit function when clicked.

In the handleSubmit function, we prevent the default form submission behavior and log the value of inputValue to the console.

Explanation

When the component is first rendered, the input field is empty. As the user types in the input field, the handleInputChange function is called, updating the value of inputValue with the user's input. When the user clicks the submit button, the handleSubmit function is called, logging the value of inputValue to the console.

This is an example of a controlled component because the value of the input field is controlled by the state variable inputValue. When the user types something in the input field, the state variable is updated and the component is re-rendered with the updated value.

Replication

To replicate this code on your local machine, follow these steps:

1. Open your terminal and navigate to the directory where you want to create your React project.

2. Run the following command to create a new React project:

npx create-react-app my-app

1. Navigate to the project directory by running the following command:

cd my-app

1. Open the project in your preferred code editor.

2. Replace the contents of the App.js file with the code above.

3. Save the file and start the development server by running the following command:

npm start

1. Open your browser and navigate to http://localhost:3000 to see the rendered output of your React application.

Conclusion

Creating forms and controlled components in React is an important aspect of web development. In this article, we explored how to create forms and controlled components in React using a simple example. By following the steps outlined above, you should be able to replicate this code on your local machine and experiment with it to gain a better understanding of forms and controlled components in React.