REACT get ip address react - Net-Raft.com

// this is the complete code, copy and use

import React from 'react';

const API = 'https://geoip-db.com/json';
const DEFAULT_QUERY = 'redux';

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
hits: [],
isLoading: false,
};

this.setStateHandler = this.setStateHandler.bind(this);

}

setStateHandler() {
this.setState({ isLoading: true });

fetch(API + DEFAULT_QUERY)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ hits: data.IPv4, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}

render() {
return (
<div>
<button onClick = {this.setStateHandler}>Click</button>
<h2>{this.state.hits}</h2>
</div>
);
}
}

export default App;

// npm install node-fetch --save

import React from 'react';
import fetch from 'node-fetch';

class App extends React.Component {
constructor() {
super();

this.state = {
data: []
}

this.setStateHandler = this.setStateHandler.bind(this);
};

setStateHandler() {

fetch('https://geoip-db.com/json')
.then(res => res.json())
.then(json => this.setState({data: json.IPv4}))

};

render() {
return (
<div>
<button onClick = {this.setStateHandler}>Click</button>
<h2>{this.state.data}</h2>
</div>
);
}
}

export default App;

import React from 'react';
import fetch from 'node-fetch';

export default class App extends React.Component {
constructor(props) {
super(props);
}

componentDidMount() {
fetch('http://freegeoip.net/json/')
.then(res => res.json())
.then(json => {
this.setState({text: json.ip});
});
}

render() {
return(
<div>
{this.state.text}
</div>
);
}
}