Having a hard time using api's with react

JavaScript
1

So I’m trying to complete the random quote machine challenge, and I’m using react to do so. I keep getting a result of ‘undefined’ when I try to save the data to the state. I am working from an api at this link https://quotes.rest/qod.json *I did have to change it from http to https, otherwise the request wouldn’t go through. This is the code that makes the call. I used axios because it makes the process simpler and I don’t want to deal with polyfill’s right now.

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

const url = "https://quotes.rest/qod.json";


class NewQuote extends Component {
    constructor(props) {
        super(props);
        this.state = {
            quote: ''
    }
    this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick(){
        axios.get(url)
            .then(results => console.log(results.data.contents.quotes.quote))
    }

        
    
    render(){
       
        return(
            <div>
                <button onClick={this.handleClick}>New Quote</button>
                <p></p>
        </div>
        )
    }

}

export default NewQuote;

and this is the JSON that it returns

{
success: {
total: 1
},
contents: {
quotes: [
{
quote: "Keep a positive mind. Remember, a failed attempt doesn't make you a failure—giving up does.",
length: "98",
author: "Lorii Myers",
tags: [
"giving-up",
"inspire",
"positive-attitude",
"self-improvement"
],
category: "inspire",
date: "2018-12-31",
permalink: "https://theysaidso.com/quote/bUu2mjT_nWdPCQyDq7IsugeF/lorii-myers-keep-a-positive-mind-remember-a-failed-attempt-doesnt-make-you-a-fai",
title: "Inspiring Quote of the day",
background: "https://theysaidso.com/img/bgs/man_on_the_mountain.jpg",
id: "bUu2mjT_nWdPCQyDq7IsugeF"
}
],
copyright: "2017-19 theysaidso.com"
}
}

I must be doing something wrong to access the quote string, but I can’t figure out what. Any help would be greatly appreciated! I’m new to react and having a hard time figuring it out so constructive criticism is welcome.

P.S, If you’re wondering about the empty

in the render component, That is where I plan to output the quote initially, then I will be sending the data to a separate react class to handle the output.
2

Do you get any data using .data only on the response?

3

yes. Sorry I actually worded my question poorly. That data i shared is what the link itself outputs. I can get data all the way through the path results.data.contents.quotes after that though, I can’t access anything. and the chrome console outputs this for results.data.contents.quotes

32%20AM
32%20AM1238×436 63.3 KB

I am suspecting that it has something to do with the fact that results.data.contents.quotes looks like it is returning an array of objects, with each objects key being it’s index value, in this case “0”.

4

I think its because quotes is an array of obj, so if you expect one result you can try writing quotes[0] to see what result you get and then take it from there. Im in no position to try it atm, but you could do destructoring as well if you want a specifik prop value.

1 Like
5

That was it! I have a hard time deciphering the way JSON is displayed sometimes :joy: I ended up using results.data.contents.quotes[0].quote , and that returns the quote. It is expected to only return 1 quote, and unfortunately its only a ‘quote of the day’, not actually random. Looking into how to manage that next!