Welcome aboard! We are happy you are here and wish you good net-raft!
// 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.text()});
});
}
render() {
return(
<div>
{this.state.text}
</div>
);
}
}
// this works nice using jquery ajax
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ip-div"></div>
<script src="https://fb.me/react-0.14.3.min.js "></script>
<script src="https://fb.me/react-dom-0.14.3.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/babel">
var MyIp = React.createClass({
render: function() {
return (
<p>{this.props.a}</p>
);
}
});
// using jquery ajax
$.get("http://ipinfo.io", function(response) {
var a;
var b = response.ip;
ReactDOM.render(
<MyIp a={b}/>,
document.getElementById('ip-div')
);
}, "json");
</script>
</body>
</html>
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421