Learning REACT-Getting an IP address lesson

1

Hello, I am studying React via the Kirupa Learning React second edition book that I borrowed from my Library. I have followed all of the instructions on Chapter 14 about getting IP address from ipinfo.io/json from page 164-174. However, after running my project, it only show 3 dots.
Please help.

2

Hi @Sam3 - welcome to the forums :slight_smile:

Can you copy/paste your code in your response to my post? That may give us some clues as to what is going on.

Cheers,
Kirupa

3

Dear Kirupa, please see the code for index.js, IPAddress.js, IPAddressContainer.js and index.html as follows:

index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import IPAddressContainer from "./IPAddressContainer";

var destination = document.querySelector("#container");

ReactDOM.render(
    <div>
        <IPAddressContainer/>
    </div>,
    destination
);

IPAddderss.js
import React, {Component} from "react";
import "./IPAddress.css";

class IPAddress extends Component {
    render(){
        return(
            <div>
                <h1>{this.props.ip}</h1>
                <p>( This is your IP address...probably:P)</p>
            </div>
        );
    }
}

export default IPAddress;

IPAddressContainer.js
import React, {Component} from "react";
import IPAddress from "./IPAddress";

var xhr;
class IPAddressContainer extends Component{
    constructor(props){
        super(props);

        this.state = {
            ip_address: "..."
        };
        
        this.processRequest = this.processRequest.bind(this);
    }
    componentDidMount(){
        xhr = new XMLHttpRequest();
        xhr.open("GET", "https://ipinfo.io/json", true);
        xhr.send();

        xhr.addEventListener("readystatechange", this.processRequest, false);
    }

    processRequest (){
        if (xhr.readyState === 4 && xhr.status === 200){
            var response = JSON.parse(xhr.responseText);

            this.setState({
                ip_address: response.ip
            });
        }
    }

    render(){
        return(
            <IPAddress ip={this.state.ip_address} />
        );
    }
}

export default IPAddressContainer;

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>IP Address</title>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>
4

Sorry for the massive delay, @Sam3. When I tried your example, I am able to see the IP address. Can you please share what you see errors/warnings you see in the Console:

5

Dear Kirupa,
Thank you for the reply and instruction to check the console. Here are the 2 warnings I see in the Console:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: How to Upgrade to React 18 – React
printWarning @ react-dom.development.js:86
ipinfo.io/json:1 Failed to load resource: the server responded with a status of 429 ()
Best regards,

6

The first error about ReactDOM.render is just telling you that your using a command from the old version of reacts api and that it will use the old stuff until you make the update it asked for. This is fine and shouldnt stop your app working.
The second one is saying that when it tried to get the json data there was an error getting it and the error was 429. 429 means there has been to many requests from your ip. So either you have done a lot of requests and it wants you to take a break for a while. Or you are using a VPN or proxy which can make it so many people are accessing the service from the same ip. So either turn off the proxy or vpn, or try turning on a vpn to change your ip.

1 Like
7

Thanks @PAEz for the great response! :slight_smile:

@Sam3 - to work around the “too many requests” issue, use the code here for making the XHR call: IPAddress from React book component only works w/ "on your network" - #14 by kirupa

:slight_smile:

8

@PAEz Thank you for your comments.

9

Dear Kirupa, thank you. I will try it.

1 Like