Get Github users using React & RestAPI

less than 1 minute read

Connected using Anxios. Updated on value input change. Type Username to get the info about Github users.

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends React.Component{
constructor(props){
super(props);
this.state = {
me: [],
name: ''
};
}
componentWillUnmount() {
this.serverRequest.abort();
}
handleChange = (e)=> {
this.setState({ name: e.target.value }, ()=> {
var self = this;
axios.get('https://api.github.com/users/' + this.state.name )
.then(function(response){
console.log(response.data);
console.log(response.status);
self.setState({
me: response.data
})
});
})
}
render() {
if(this.state.name) {
return <div>
Github user: <input type="text" value={this.state.name} onChange={this.handleChange}></input>
<h5>ID: {this.state.me.id}</h5>
<h1>{this.state.me.login} </h1>
<h4>{this.state.me.name} from {this.state.me.location}</h4>
<img src={this.state.me.avatar_url} style=/>
<h5>
{this.state.me.bio}</h5>
<h5>Since: {this.state.me.created_at}</h5>
<h3>Repos: {this.state.me.public_repos}</h3>
</div>
} else {
return <div>
Github user: <input type="text" value={this.state.name} onChange={this.handleChange}></input>
</div>
}
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);