react

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

get client country react

714

REACT

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="country-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 MyCountry = React.createClass({
render: function() {
return (
<p>{this.props.a}</p>
);
}
});

// using jquery ajax
$.get("https://geoip-db.com/json/geoip.php?jsonp=?", function(response) {
var a;
var b = response.country_name;

ReactDOM.render(
<MyCountry a={b}/>,
document.getElementById('country-div')
);

}, "json");

</script>

</body>
</html>

By 7 years ago

The power of the user (%)

REACT

// 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('http://freegeoip.net/json/')
.then(res => res.json())
.then(json => this.setState({data: json.country_name}))

};

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

export default App;