# Add to your React Application

This example deploys Address Lookup with React.

## Use in your app[​](#use-in-your-app "Direct link to Use in your app")

### Install[​](#install "Direct link to Install")

```
npm install --save @addresszen/address-lookup
```

### Importing Necessary Modules[​](#importing-necessary-modules "Direct link to Importing Necessary Modules")

```
import "./styles.css";

import React, { useEffect, useState, useRef } from "react";

import { AddressLookup } from "@addresszen/address-lookup";
```

### Initializing Component State[​](#initializing-component-state "Direct link to Initializing Component State")

```
const [state, setState] = useState({

   line_1: "",

    line_2: "",

    city: "",

    state: "",

    zip_plus_4_code: "",

    country: "",

});
```

Initialize the component state with empty strings for address lines, post town, and postcode.

### Preventing Re-initialisation with useRef[​](#preventing-re-initialisation-with-useref "Direct link to Preventing Re-initialisation with useRef")

```
const shouldRender = useRef(true);
```

The useRef hook is used to persist the flag shouldRender across re-renders, ensuring the address Lookup is initialized only once.

### Address Lookup Initialisation in useEffect[​](#address-lookup-initialisation-in-useeffect "Direct link to Address Lookup Initialisation in useEffect")

Copy and paste the code below to Initialize the Address Lookup.

```
useEffect(() => {

  if (shouldRender.current) {

    shouldRender.current = false;



    AddressLookup.watch({

      inputField: "#searchField",

      apiKey: "ak_test",

      onAddressRetrieved: (address) => {

        setState({

          line_1: address.line_1,

          line_2: address.line_2,

          city: address.city,

          state: address.state,

          zip_plus_4_code: address.zip_plus_4_code,

          country: address.country,

        });

      },

    });

  }

}, []);
```

info

Make sure to replace the `apiKey` `ak_test` with your own API key. This can be located on your [account](https://account.addresszen.com/tokens).

### Form and Input Fields[​](#form-and-input-fields "Direct link to Form and Input Fields")

Enclose your input fields inside a Form.

Each input field is bound to the component's state and has an onChange handler to update the state accordingly.

```
return (

    <form className="App">

      <h1>Address Lookup React Demo</h1>

      <div>

        <input

          placeholder="Start typing to try an address"

          id="searchField"

          type="text"

        />

      </div>

      <div>

        <label htmlFor="line_1">Address Line One</label>

        <input

          id="line_1"

          type="text"

          value={state.line_1}

          onChange={(e) => setState({ ...state, line_1: e.target.value })}

        />

      </div>

    {/* Similar divs for other address parts */}

  </form>

);
```

info

If you wish to add an additional field, include the parameter name [from our documentation](/docs/data/usps.md).

## Live Demo[​](#live-demo "Direct link to Live Demo")