7.4 - Github API Card Form

We will now use axios to call our Github endpoints so we can retrieve data from the fountain.

Copy this and we will break it down:

import React from 'react';
import { Component } from 'react';
import axios from 'axios';

export default class GitHubCardForm extends Component {
  state = { userName: 'jpauloconnor' }
  handleSubmit = (event) => {
    event.preventDefault();
    axios.get(`https://api.github.com/users/${this.state.userName}`)
      .then(resp => {
        this.props.onSubmit(resp.data);
        this.setState({ userName: '' });
      });
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text"
          value={this.state.userName}
          onChange={(event) => this.setState({ userName: event.target.value })}
          placeholder="Github username" required />
        <button type="submit">Add card</button>
      </form>
    );
  }
}

We will start with this line of code:

axios.get(`https://api.github.com/users/${this.state.userName}`)

Axios is a library that allows users to make http request to certain URIs. You will see all of the http verbs as methods of the axios object.

The value that gets returned after the get method is invoked is a Promise. For us to get the data from a promise we need to append a then() method and hold the success and or failures, which is what we do in this next part of the code:

.then(resp => {
  this.props.onSubmit(resp.data);
  this.setState({ userName: '' });
});

Not only do we handle the success in this function, but we also change the state of this component as well.

We know that when we change the state of a component with setState() what happens?

The component refreshes!