IP Address

[Nwankwo_Valentine]

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?

[kirupa]

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

[Nwankwo_Valentine]

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

[Nwankwo_Valentine]

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?

[kirupa]

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

[Nwankwo_Valentine]

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

[kirupa]

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

[Nwankwo_Valentine]

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

[Nwankwo_Valentine]

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;

[kirupa]

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

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 The solution is to replace the URL with: https://ipinfo.io/json?token=2277ce4bac0347

That will ensure the IP address fully loads.

Cheers,
Kirupa

[Nwankwo_Valentine]

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

[Nwankwo_Valentine]

Pls why am i getting this error;

[kirupa]

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?

[Nwankwo_Valentine]

you’re right, it been fixed thanks.

[luissergio]

I went through the same problem and got stuck for a couple of weeks until I had the idea of checking this forum and find this solution.
Thanks very much to both of you for this.

[kirupa]

Glad it helped @luissergio , and welcome to the forums