Build with the SWAPI Star Wars API, React with Hooks
Tags: react, beginners, webdev
Published: 2020-10-21 11:32:38

Let’s make an app with the [The Star Wars API](https://swapi.co/). I want to create a simple app that gets data of characters and displays them in a list.

This is **not** a guide to React so familiarity with some React is essential. Think of this article as a ‘code along with me’ type thing. This is just how I'm going to create a quick little app.

## Must include

- fetch data from the API
- set state using `useState` and `useEffect` hooks
- Display the content in a list

## Cleanup

I like to begin with `create react app` and delete the files I don’t need. Then create a components folder with the table display component. `List.js`.

```javascript
import React from "react"

export const List = () => {
  return <h1>Hello List</h1>
}
```

In `App.js` import `List.js` to check everything is working correctly.

```javascript
import React from "react"
import { List } from "./components/List"

function App() {
  return (
    <div>
      <List />
    </div>
  )
}

export default App
```

## Fetching the Data

Create a folder called `utils` with the file `api.js`. This will have out API data fetching functions within.

Add the url endpoints:

```javascript
const urls = [
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/2",
  "https://swapi.co/api/people/3",
  "https://swapi.co/api/people/4",
]
```

Layout a `try/catch` `async` function. This is a good thing to start with because it lays it out for you explicitly. Basically the function will `try` to do something and if theres something wrong it will `catch` the error and log it to the console.

```javascript
  export const fetchData = async () => {
      try {

      } catch (error) {
          console.log(‘Error’, error)
      }
  }
```

Now our `try/catch` is laid out let's add the rest. Then I’ll explain.

```javascript
export const fetchData = async () => {
  try {
    const response = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    );
    console.log(response);
    return response;
  } catch (error) {
    console.log(‘Error’, error);
  }
};
```

- We create a variable response for holding our data.
- Using the keyword `await`. Await - ‘Go do this for me and come back with what you get.’
- `Promise.all` method is used to tell the function to go and do **all** of the urls from our urls array. One at a time.
- Using `.map()` array method to _iterate_ over our array.
- We then pass each url into the fetch(). Seen as `url => fetch(url)`
- We use `.then` for chaining. Taking the response or ‘res’ which is returned once ‘fetched’. Convert the response to **JSON** which we can use.

But we need to call this function in our app when the page is rendered to the screen. We do this using the `useEffect` hook from react. No if you check in the console you will see our Star Wars data logged.

```javascript
import React, { useEffect } from "react"

import { List } from "./components/List"
import { fetchData } from "./utils/api"

function App() {
  useEffect(() => {
    fetchData()
  })

  return (
    <div>
      <List />
    </div>
  )
}
```

## Setting State

Now we must create some state to use. We will do this with the `useState` hook.

```javascript
import React, { useEffect, useState } from "react"

import { List } from "./components/List"
import { fetchData } from "./utils/api"

function App() {
  const [people, setPeople] = useState([])

  useEffect(() => {
    fetchData().then(response => setPeople(response))
  })

  return (
    <div>
      <Table />
    </div>
  )
}
```

- We import `useState` from React
- Create state as an empty array `const [people, setPeople] = useState([])`
- Using `.then` once more for chaining. We get the response and set our state to the response `.then(response => setPeople(response))`

Now check your React dev tools and if followed correctly you will see the state is now Star Wars characters.

Now we have our people state we must pass it into our List component `<List people={people} />`

## Display the Data

```javascript
export const List = ({ people }) => {
  return (
    <div>
      <h1>List</h1>
      <ul>
        {people.map(person => {
          return <li key={person.name}>{person.name}</li>
        })}
      </ul>
    </div>
  )
}
```

- We de-structure people `{ people }`
- using `map()` we iterate over our array 'people’ and for each person we display the name of the person as a list item.

And there we have a very very basic app displaying data from an API in React.

## Conclusion

Though very basic maybe you could get some value out of this. There is lots more that can be done to extend this app further. Go ahead and add styles and use more data from the SWAPI API.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)