> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)
# Add Address Autofill in a React app
**React** is a popular JavaScript library used for building user interfaces. Since React manipulates the DOM, it can be confusing to connect React with other libraries that also manipulate the DOM and manage state — like Mapbox Search JS.
In this tutorial, you will learn how to add [Mapbox Search JS React](https://docs.mapbox.com/mapbox-search-js/api/react/) to your website, which builds on Mapbox Search JS to provide a first-class React experience.
Address Autofill helps developers simplify the tedious multi-field address form into a single autocomplete search box, allowing their customers to find their address with a few keystrokes.
## Prerequisites
To complete this tutorial, you will need:
- **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Developer Console.
- **A Code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/).
- **Node.js and npm.** [Download and install](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) the latest version.
- **Familiarity with React development.** Beginner experience with JSX, CSS, HTML and JavaScript.
## Set up the page structure
To get started, create a new folder called `add-address-autofill-with-react`.
In the `add-address-autofill-with-react` folder, create a new file:
- `package.json`: This file is used to specify all the Node packages that your app requires, including React and Mapbox Search JS.
Create blank files that will have the following file structure. You will fill in the contents of these files later in the tutorial.
add-address-autofill-with-react
package.json
public
index.html
src
index.js
Copy the following code into `package.json`:
```json
{
"name": "add-address-autofill-with-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": [
"defaults",
"not ie 11"
],
"author": "Mapbox",
"license": "MIT"
}
```
Besides the packages `react` and `react-dom`, this file also requires [`react-scripts`](https://www.npmjs.com/package/react-scripts) to build the app. This is also known as [Create React App](https://create-react-app.dev/).
Save your changes.
In the command line, navigate into the `add-address-autofill-with-react` folder you created.
In that folder, run the command `npm install`, which will install all the Node packages that you specified in the `package.json` file. This step also creates the `package-lock.json` file.
### Installing Search JS React
[`@mapbox/search-js-react`](https://www.npmjs.com/package/@mapbox/search-js-react) is the main package, which is a React-specific interface to Mapbox Search JS.
To install Search JS React, run the one-time command:
```
npm install --save @mapbox/search-js-react
```
This step will change your `package.json`.
## Create the HTML page
Open the `public/index.html` file and paste the following code into it:
```html
Add Address Autofill in a React app
```
This code creates the structure of the HTML page your users will see. There is a `
` element with the ID `root` in the `` of the page. This `
` is the container in which the React app will be rendered on the page.
Save your changes.
## Create the React app
Open the `src/index.js` file and paste the following code into it:
```js
import ReactDOM from 'react-dom';
function App() {
return (
);
}
ReactDOM.render(
,
document.getElementById('root')
);
```
This code creates an `` React component, which renders a form with input elements for an address form. You are responsible for styling of input elements.
At the bottom, this code also renders our `` component to the `#root` container specified in **index.html** above.
Save your changes.
## Set up autocomplete tags
Search JS React requires HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) tags, a standard browser feature. Google Chrome, Mozilla Firefox, and Safari use `autocomplete` to autofill addresses and credit cards.
You may already have autocomplete tags. You can test this with the presence of `autocomplete`, or `autoComplete`, properties in React inputs.
```javascript
return (
);
```
The autoComplete property can also be specified on [Formik ``](https://formik.org/docs/api/field#props-1) inputs, a popular React form handling library.
### Add autocomplete attributes
If autocomplete attributes are not present, you'll have to add them to each HTML input you'd like to autofill.
Here are common autocomplete attributes for address forms. This is a non-exhaustive list, see the full list at [whatwg.org](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
| Autocomplete tag | Description | Example |
| --- | --- | --- |
| `autocomplete="address-line1"` | The first line of an address, usually includes the street number and street. | 740 15th St NW |
| `autocomplete="address-line2"` | The second line of an address, usually an apartment number. | Apartment 700 |
| `autocomplete="address-level1"` | The **least** specific administrative level. In the United States, this is the state or territory. | District of Columbia |
| `autocomplete="address-level2"` | The second **least** specific administrative level. In the United States, this is the city. | Washington |
| `autocomplete="address-level3"` | In countries with more than two administrative levels. | |
| `autocomplete="postal-code"` | The postal code of the administrative level. | 20005 |
| `autocomplete="country"` | The standardized country code. | us |
| `autocomplete="country-name"` | The country name. *Note: These are non-standardized.* | United States |
Using `autoComplete`, see below how this changes `src/index.js`.
```html
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
);
}
ReactDOM.render(
,
document.getElementById('root')
);
```
## Add Address Autofill
Our last step is to wrap the `` element in [``](https://docs.mapbox.com/mapbox-search-js/api/react/autofill/#addressautofill), available from the Search JS React package.
Note this works because:
1. Our `` is the child of a `
);
}
ReactDOM.render(
,
document.getElementById('root')
);
```
---
## Final product
You have created a React app that has a form with inputs, browser autocomplete, and uses Search JS React for interactive Address Autofill.
The final `src/index.js` page will look like the following:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { AddressAutofill } from '@mapbox/search-js-react';
function App() {
return (
);
}
ReactDOM.render(
,
document.getElementById('root')
);
```
This tutorial should be applicable to your own React application and workflows. Create React App is not required to use Search JS React.
## Next steps
**Congratulations!** You have integrated Mapbox Search JS React into your React app, simplifying the tedious multi-field address form into a single autocomplete search box.
### What we covered
- Setting up a React App
- Install Search JS React
- Creating your address form
- Adding autocomplete tags
- Adding the `AddressAutofill` wrapper component
### Learn More
Now that you've setup Address Autofill in your React app you can explore other [Mapbox Search JS](https://docs.mapbox.com/mapbox-search-js/) examples like
- [Address Confirmation](https://docs.mapbox.com/mapbox-search-js/example/confirm-address/)
- [Minimap](https://docs.mapbox.com/mapbox-search-js/example/minimap/)
- [Add a search box to a web map](https://docs.mapbox.com/mapbox-search-js/example/add-search-box-to-map/)