IP Address

PLS SIR MY CODE IS NOT WORKING
pls i was reading your react book about ip address but the code doesn’t work on mine.

let 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){
        let response = JSON.parse(xhr.responseText);

        this.setState({
            ip_address:response.ip
        })
    }
}
render(){
    return(
        <div>{this.state.ip_address}</div>
    )
}
```

}

export default IPAddressContainer;

pls what wrong?

What is the error you are receiving? If you look in the dev tools console, you may see some extra information. Please copy/paste the console contents here :slight_smile:

Pls thanks for responding…
I didn’t got any error in the console but just the code is not just working
Pls help me out.
Am still a newbie in react

I used the {this.state.ip_address} as the jsx expression instead to get the ip address you got but i was getting the “…” the three dots at this.state = {
ip_address : ‘’…"
}
Pls Sir why am i getting the Three dots instead of the Ip address?

Can you double check your code with the online version here: https://www.kirupa.com/react/working_with_external_data.htm

With the snippets of code you provided, it is hard to verify everything fully :slight_smile:

Yes Sir.
The snippet of code provided and mine are the same but still getting the three dots instead to get the Ipaddress

Do you have a firewall by any chance that may be interfering? Does the following example work https://www.kirupa.com/react/examples/ipaddress.htm

:grinning:

Thanks for replying Sir.
It did work Sir, but why mine getting the three dots

Pls Sir my code and yours seems the same why mine not working fine?
Pls help me am still a newbie in react.
Your book is the first react book am reading, pls help me out.

import React, {Component} from 'react';


let 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){
            let response = JSON.parse(xhr.responseText);

            this.setState({
                ip_address:response.ip
            })
        }
    }
    render(){
        return(
            <div>{this.state.ip_address}</div>
        )
    }

}

export default  IPAddressContainer;

I totally see it now! There is nothing wrong with your code. It is something that became a mistake in the past few months :stuck_out_tongue:

When I tried your code, the Console showed the following error:

The reason is that the ipinfo.io URL that I have currently specified in the book has gotten too many requests from localhost :frowning: The solution is to replace the URL with: https://ipinfo.io/json?token=2277ce4bac0347

That will ensure the IP address fully loads.

Cheers,
Kirupa

Thanks So Much Sir:smile:
Am so happy now.
Pls Thank you.


Pls why am i getting this error;

My guess is that the destination variable isn’t pointing to a DOM element. Do you have the querySelector call appropriately referencing the correct element?