Button in React application isn't updating UI

Support
,
1

I have a react app that uses a button to make calls to an api like so:

/* actually render things */
    render() {
        return (
                <div className="main">
                    <h1>{this.state.quoteAuthor}</h1>
                    <p>{this.state.quote}</p>
                    <div className="button">
                        <button id="button" onClick={this.update}>New quote</button>
                    </div>
                </div>
        );
    }
    
    /* async fetch the quotes and reassign the variables to them once processed */
    update = async() => {
        let response = await fetchQuote();
        console.log(response);
        this.setState({
            quoteAuthor: response.author,
            quote: response.quote
        });
    };

It works just fine locally, however, it does not do anything once deployed.

2

hi @John123Allison, do you have a link to a live site where we can take a look at this behaviour?

3

https://programmerquotes.netlify.com/

4

alright, here is your culprit:

Screen Shot 2020-02-25 at 15.43.15
Screen Shot 2020-02-25 at 15.43.152412Ă—828 152 KB

this is popping up because you are on a https server after you deploy, which isn’t the case when running the app from localhost.

I’m not sure exactly what to recommend to fix - a Support Engineer may have ideas, but this is why it’s not working, for sure. Can you store the json as part of your site? if you were on the same server this wouldn’t be an issue. :thinking:

5

Would it work to change the requested url to HTTPS? I am not familar with HTTP so I don’t know if that could do anything.

6

Update: did not fix the issue

7

Hello! I deployed a SPA React site that accesses an external API to recieve JSON data. However, when called the console throws the following:

Blocked loading mixed active content “http://quotes.stormconsultancy.co.uk/random.json”
programmerquotes.netlify.com:1:875
TypeError: NetworkError when attempting to fetch resource.

What should I do to allow that to be called? it works on local deployments.

8

john, i moved your post here so it is all in one place. we’re still thinking about this. can you try adding the json to your website on netlify? then this wouldn’t be an issue.

9

I’m not really sure how to do that - the api gives me a random json from a collection I assume.

10

I believe this is happening because https://quotes.stormconsultancy.co.uk/ either doesn’t have an SSL certificate, or has one that’s incorrectly set up/expired, so only their http site is available. There’s no way to make Netlify use the less secure http protocol that would enable you to access http://quotes.stormconsultancy.co.uk/ without that “mixed content” error. More on why we use https here:
HTTPS (SSL) | Netlify Docs

Is there another API you could call with your React button that’s hosted on an https site? Alternatively, you could follow Perry’s rec and throw that site’s “quotes” file up on a server. The file seems to be here:
http://quotes.stormconsultancy.co.uk/quotes.json

And there are a bunch of free services that would let you do that: Firebase, Glitch, etc. Want to give some of those ideas a shot and let us know how it goes or if we can help further?

1 Like
11

I will try those, thank you Jen!