Need help on random quote machine

JavaScript
1

Hi, I’ve been working on this project for a number of days but I can’t seem to figure out why is it failing the test #9: “My quote machine should fetch the new quote’s author when the #new-quote button is clicked and display it in the #author element.”

Currently: https://codepen.io/JayYong/pen/bxKRBq

I can’t seem to figure out why the following are not working as well…

  1. Twitter intent (Can’t get the quote & author)

  2. Image not rendering on refresh (I’m trying to load a new random image together with the quote every time the “Random Quote” button is pressed)
    If I were to hardcode in componentDidMount: document.getElementById("quote-box").style.background = "url('https://picsum.photos/1000/450/?random')"; It would load a new image upon loading the page only.
    I have a method called updateBackground which supposedly grab a new image and update the background, but if I were to remove the componentDidMount line, it would also change the background ONCE at most upon clicking the random quote button, so I’m not where went wrong. Any help would be really appreciated! Thanks !

3

Hi, thanks so much for the help and feedback. I’ve read up abit on XSS, seems like it’s a security vulnerability or some sort and reactJS escapes it to prevent cross site scripting. It seems like reactJS is relatively xss safe when used correctly. But what I do not understand is why is it a problem since the api I’m using returns is in html, after escaping the characters it should be fine isn’t it?

Some other things I’m still having problem is the twitter intent is still undefined when I click on the tweet button for both the quote & author.
As well as the image would “jump” back to initial image loaded for a split second before loading the new image. Any idea why is this so?

5

Hi, you can replicate the problem by clicking on the “Random Quote” button. The initial picture would appear for just a split second before it updates to the new one for every time the button is clicked, not sure if this is just on my end though.
So to prevent XSS when calling an api, are there any actions required on my end?

7

Thanks so much for the help randell! I’ve managed to fix those issues and learn something new during it. I will try to keep at it in the next project. Have a good one.