REACT get ip address react - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

How to get client ip address using react ?


 3915

REACT


7

// 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;


By     Created   
The power of the user (%)
63%

REACT


6

// 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;


By     Created   
The power of the user (%)
5%

REACT


4

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>
);
}
}


By     Created   
The power of the user (%)
7%

REACT


3

<!DOCTYPE html>
<html>
<head>
<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>

</head>
<body>

<script type="text/javascript">
var userip;
</script>
<script type="text/javascript" src="https://l2.io/ip.js?var=userip "></script>

<script type="text/javascript">

var div = React.DOM.div

var HelloWorldComponent = (
div(null,'' userip '')
)

ReactDOM.render(HelloWorldComponent, document.getElementsByTagName('body')[0]);

</script>

</body>
</html>


By     Created   
The power of the user (%)
36%

REACT


1

// 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>


By     Created   
The power of the user (%)
3%



The most helpful REACT solutions

How to get client ip address using react ?How to get client ip address using react ?REACT

Click to see more ...

  3.9K     408

how to get the type of a device using react ?how to get the type of a device using react ?REACT

Click to see more ...

  1.3K     202

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  760     127

How to get latitude and longitude using react/javascript ?How to get latitude and longitude using react/javascript ?REACT

Click to see more ...

  549     104

get ip address reactget ip address reactREACT

Click to see more ...

  329     80

time ago reacttime ago reactREACT

Click to see more ...

  251     73

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  216     58

get client country reactget client country reactREACT

Click to see more ...

  213     53

how to detect a mobile device not tablet using react ?how to detect a mobile device not tablet using react ?REACT

Click to see more ...

  173     50

detect browser reactdetect browser reactREACT

Click to see more ...

  186     36