How to add address on form in react js?

March 27, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add address on form in react js, you can use input tag in form tag. It will add address on form in react js.

Today, I am going to show you, how to add address on form in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React, { useState } from 'react';

Step 3: Create a Component.

you can use input tag in form tag and add address on form in react js.

<form onSubmit={handleSubmit}>
      <label>
        Street:
        <input type="text" value={street} onChange={handleStreetChange} />
      </label>
      <br />
      <label>
        City:
        <input type="text" value={city} onChange={handleCityChange} />
      </label>
      <br />
      <label>
        State:
        <input type="text" value={state} onChange={handleStateChange} />
      </label>
      <br />
      <label>
        Zip Code:
        <input type="text" value={zipCode} onChange={handleZipCodeChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
</form>

Define the add address on form example.

The below code is an example of a React. You have to import React. and use input tag in form tag` to add address on form in react js.

App.js


import React, { useState } from 'react';

const AddressForm = () => {
  // State variables for address fields
  const [street, setStreet] = useState('');
  const [city, setCity] = useState('');
  const [state, setState] = useState('');
  const [zipCode, setZipCode] = useState('');

  // Function to handle change event for street input
  const handleStreetChange = (event) => {
    setStreet(event.target.value);
  };

  // Function to handle change event for city input
  const handleCityChange = (event) => {
    setCity(event.target.value);
  };

  // Function to handle change event for state input
  const handleStateChange = (event) => {
    setState(event.target.value);
  };

  // Function to handle change event for zip code input
  const handleZipCodeChange = (event) => {
    setZipCode(event.target.value);
  };

  // Function to handle form submission
  const handleSubmit = (event) => {
    event.preventDefault();
    // Log the address to the console for now
    console.log({
      street,
      city,
      state,
      zipCode
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Street:
        <input type="text" value={street} onChange={handleStreetChange} />
      </label>
      <br />
      <label>
        City:
        <input type="text" value={city} onChange={handleCityChange} />
      </label>
      <br />
      <label>
        State:
        <input type="text" value={state} onChange={handleStateChange} />
      </label>
      <br />
      <label>
        Zip Code:
        <input type="text" value={zipCode} onChange={handleZipCodeChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default AddressForm;

In the above code example, I have used the form tag and add address on form in react js.

Check the output of the above code example.

All the best 👍