###### tags: `Lambda` `WEB39` `React`
# Lambda: WEB39: Part 2: Adding an API Call

[Day 1 Part 1 Notes](https://hackmd.io/9HqSlmh-ScWINTJOCBt0BQ?view)

After this morning we had an app that has 2 components 1 for School material links and 1 for links of notes

We used a resuable component for each as the data files were set up the same way.

Now we wanted to add a random quote to our App.js file.

## Steps to using an API

### Step 1:
Find an api that you are interested in (if you aren't given one)
Here is a good Repository you can use to find one
https://github.com/SHL-Melissa/public-apis

### Step 2:
This is one of the most important steps you need before writing any code or even starting to use the API of choice.
Lets look at 2 different links of that repo

1. The link with the red arrow leads you to this repository
a. https://github.com/lukePeavey/quotable
There doesn't seem to be a link to the live data easily found and the readme document doesn't seem to make a whole lot of sense

2. The link with the blue arrouw leads you here
a. https://pprathameshmore.github.io/QuoteGarden/
Ok this is an actual website. And looking at this I can clearly see that there is a link to where I can find the data. It even seems to show me clearly what I might see at the given link.

Knowing what each API offers is important. Having good documentation is key

### Step 3:
Still no code yet. Make a get request. We used the link in the sencond one (blue arrow) https://quote-garden.herokuapp.com/api/v3/quotes
I recommend using Firefox, postman, or httpie to view this get request as they show you a nice readable format. This link provided us with some interesting data
Here is a view from Firefox.
So It looks like it is returning a few objects that we don't really need but there is an array called data with 10 objects containing quotes. That is what we will want to render.

### Step 4:
Now that we know how the data looks lets build our axios call

    const [quotes, setQuotes] =useState([])

    useEffect(() => {
        axios
            .get(`https://quote-garden.herokuapp.com/api/v3/quotes/`)
            .then((res) => {
                setQuotes(res.data)
            })
            .catch((err) => {
                console.log('problems getting data', err)
            })
    }, [])
    
    console.log('quotes', quotes)

That code when ran in the app (before we even render any data to the actual page) will look something like this:
Where the Red arrow is is how it stars before the axios call as an empty array
Where the Orange arrow is starts the console.log of the data being returned.
The Green arrow is the part that we actually want to use. So lets modify our axios call to just get the parts we want.

    useEffect(() => {
        axios
            .get(`https://quote-garden.herokuapp.com/api/v3/quotes/`)
            .then((res) => {
                setQuotes(res.data.data)
            })
            .catch((err) => {
                console.log('problems getting data', err)
            })
    }, [])

    console.log('quotes', quotes)

Notice in our .then statement we have res.data.data now. Res.data returned everything the api was returning. But what we wanted to use was in an array named data if we had wanted what was in the pagination array we would have res.data.paginagion. Now we have the following data returned
Much easier to work with now. From this moning we know that since we are getting an array of objects we know that we will need to map through the returned data to list what we want. And we would mapp throug it the following way:

        <div className='data'>
        {props.quotes.map(quote => (
            <div className='info'>
                <h2>{quote.quoteAuthor}</h2>
                <h3>{quote.quoteGenre}</h3>
                <p>{quote.quoteText}</p>
            </div>
        ))}
    </div>

If we manipulated the axios call again and pull back say just the 1st index of data so just an object of data we would do the following:

    useEffect(() => {
        axios
            .get(`https://quote-garden.herokuapp.com/api/v3/quotes/`)
            .then((res) => {
                setQuotes(res.data.data[0])
            })
            .catch((err) => {
                console.log('problems getting data', err)
            })
    }, [])

    console.log('quotes', quotes)

At this point our console.log would look like this
The Red arrow being what we pulled before and array with 10 objects and the green arrow is just the 1st index. When your data is returned as just an array the use of .map is no longer needed and you can simply do the following:

<div>
    <h2>{quotes.quoteAuthor}</h2>
    <h3>{quotes.quoteGenre}</h3>
    <p>{quotes.quoteText}</p>
</div>

However we would only be pulling 1 quote not the potential of 10.

As we moved through and got the app to work we realized that the quotes weren't all that random and were always the same genre. Boring

So we dug into the github repo for the api and found that if we added /random to the end of our api link we would get a totally new random quote everytime we refreshed the screen. Only 1 quote, but it was still returning the data as an array with an object so we still needed to map through.

You can find the new code added to a new branch day1part1 but it is also merged with the main branch now as well.
https://github.com/SHL-Melissa/web39-react