Ask GitHub for the information

Cool! We must have a way now to ask GitHub for the details of a single username. We’ll do so using a Form component, where we manage our own state (username), and we ask GitHub for information about a user using their public APIs, via the Axios library.

Let’s create a new Form component:

const Form = props => {
  return (
    <form>
    </form>
  )
}

Our form hosts a single input element, and a button. Let’s add them to the JSX:

const Form = props => {
  return (
    <form>
      <input
        type="text"
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

We make form handle a piece of state called username. As we did in the previous project, we’re going to use hooks.

When the username is updated, we are notified in the onChange() event callback. In there, we update the username value by calling setUsername():

import React, { useState } from 'react'

//...

const Form = props => {
  const [username, setUsername] = useState('')

  return (
    <form>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

Next, we handle the form submit event, which is emitted when the user click the “Add card” button, automatically because the button is type="submit".

We add an onSubmit attribute to the form, and we attach an handleSubmit function callback:

const Form = props => {
  const [username, setUsername] = useState('')

  const handleSubmit = event => {
    //...
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

In this method we first call event.preventDefault() to avoid the browser submitting the form to the server (which is the default behavior) and we call the Axios library axios.get() method, to get the person information from GitHub.

We need to install and import Axios first:

npm install axios

(or install it on CodeSandbox by clicking the “Add Dependency” button)

then add

import axios from 'axios'

The axios.get() method returns a promise, so we can add a function callback as the .then() argument, and when it’s invoked it means we got our data back.

When this happens, we call the onSubmit prop, which is passed to us by the App component (we’ll add it later).

We also reset the username:

handleSubmit = event => {
  event.preventDefault()

  axios.get(`https://api.github.com/users/${username}`).then(resp => {
    props.onSubmit(resp.data)
    setUsername('')
  })
}

Here’s the complete component code:

import React, { useState } from 'react'
import axios from 'axios'

const Form = props => {
  const [username, setUsername] = useState('')

  const handleSubmit = event => {
    event.preventDefault()

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data)
      setUsername('')
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

export default Form

To recap, when you enter a name in the input field managed by the Form component, this name is bound to its state.

When Add card is pressed, the input form is cleared by clearing the userName state of the Form component.

The example uses, in addition to React, the Axios library. It’s a nice useful and lightweight library to handle network requests. Add it to the Pen settings in Codepen, or install it locally using npm install axios.

When the form is submitted we call the handleSubmit event, and after the network call we call props.onSubmit passing the parent (App) the data we got from GitHub.

---

Go to the next lesson