Fetch Geo Data from any IP Address in React
Tags: webdev, rohitnirban, tutorial, ipaddress
Published: 2024-03-13 10:25:57

In this tutorial, we'll explore how to retrieve geographical data from an IP address using the ipinfo API in a React application. We'll make use of the Axios library for making HTTP requests.

## Prerequisites

Before we get started, ensure you have Node.js and npm installed on your machine.

## Step 1: Set up a React Application

If you haven't already set up a React application, you can create one using Create React App. Open your terminal and run the following command:

```bash
npx create-react-app ipinfo-react-app
```

This command will create a new React application named `ipinfo-react-app`.

## Step 2: Install Axios

Axios is a promise-based HTTP client for the browser and Node.js. We'll use it to make requests to the ipinfo API. Install Axios by running the following command in your terminal:

```bash
npm install axios
```

## Step 3: Obtain an API Access Token

You need an access token from ipinfo to access their API. Go to [ipinfo.io](https://ipinfo.io/) and sign up for an account. After signing up, you'll get an access token. Keep it handy as we'll need it in the next step.

## Step 4: Fetch Geo Data using Axios

Navigate to the `src` directory of your React application and create a new file named `GeoData.js`. In this file, we'll write the code to fetch geo data from ipinfo.

```javascript
// GeoData.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GeoData = () => {
  const [geoData, setGeoData] = useState(null);
  const ipinfoToken = 'YOUR_IPINFO_ACCESS_TOKEN';

  useEffect(() => {
    const fetchGeoData = async () => {
      try {
        const response = await axios.get(`https://ipinfo.io?token=${ipinfoToken}`);
        setGeoData(response.data);
      } catch (error) {
        console.error('Error fetching geo data:', error);
      }
    };

    fetchGeoData();
  }, []);

  return (
    <div>
      <h2>Geo Data</h2>
      {geoData && (
        <ul>
          <li>IP: {geoData.ip}</li>
          <li>City: {geoData.city}</li>
          <li>Region: {geoData.region}</li>
          <li>Country: {geoData.country}</li>
          <li>Location: {geoData.loc}</li>
          <li>Organization: {geoData.org}</li>
        </ul>
      )}
    </div>
  );
};

export default GeoData;
```

Replace `'YOUR_IPINFO_ACCESS_TOKEN'` with your actual ipinfo access token obtained in Step 3. Also, you can store your `ACESS_TOKEN` in env file which is the best way to do so.

## Step 5: Render GeoData Component

Open `App.js` in the `src` directory and import the `GeoData` component we just created. Replace the existing code in `App.js` with the following:

```javascript
// App.js
import React from 'react';
import './App.css';
import GeoData from './GeoData';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>IPInfo Geo Data</h1>
      </header>
      <GeoData />
    </div>
  );
}

export default App;
```

## Step 6: Start the Application

Now, you can start your React application by running the following command in your terminal:

```bash
npm start
```

**Preview**


![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94flui0y6qsbrw6ym128.png)


This command will start the development server, and you should be able to see your application running at `http://localhost:3000`. You'll see the fetched geo data displayed on the screen.

That's it! You have successfully fetched geo data from an IP address using ipinfo in a React application using Axios. Feel free to customize the UI or extend the functionality as needed.