Random Quote Machine - API, React

JavaScript
1

So, I have done this project once before using jQuery: https://codepen.io/videiraft/pen/JbNQJZ

Right now I am doing it using React. https://codesandbox.io/s/x98k1llpl4 The problem I am facing is that it’s behaving much slower than with jQuery. Does anyone know why or how to solve it? Am I doing something wrong?

Thank your for your attention!

2

Do you mean fetching the quote is slow? If so, it is probably just the cors proxy.

You might also want to add a catch to the promise (fetch).

3

Yes, that is what I meant. Is there any other way to solve the cors problem without the proxy? (without jQuery too) Thank your for your answer. And I will add a catch to the promise, thank you!

4

And why does this happen?

SyntaxError: Unexpected token ’ in JSON at position 24
at JSON.parse ()
at eval (App.js? [sm]:32)

The JSON data is:
{“quoteText”:“Truth isn’t all about what actually happens but more about how what has happened is interpreted.”, “quoteAuthor”:“Byron Pulsifer”, “senderName”:"", “senderLink”:"", “quoteLink”:“http://forismatic.com/en/0fd1de2765/”}

There is a backslash before the ’ symbol. So why does this happen?

5

I can see you have switched away from the API you were using, so I guess it doesn’t matter much anymore, however. The API really should not be sending strings with escaped single quotes (it’s invalid as far as I know).

stackoverflow
\' is never a valid escape sequence in a JSON string. It doesn’t need to be, because JSON strings are always double-quoted.

Here is another one I got from the API (this will fail validation), so it’s probably better not to use it anyway.

{
	"quoteText": "There is nothing in a caterpillar that tells you it\'s going to be a butterfly.",
	"quoteAuthor": "Buckminster Fuller",
	"senderName": "",
	"senderLink": "",
	"quoteLink": "http://forismatic.com/en/c9007aae7e/"
}
6

Yes, I had too many problems with it, it was too slow, and took me much time to understand what was happening, so I moved on… Anyway thank you for your response! I didn’t even think about that since the jquery version was working with the same API.
Thank you so much! Now I know what the problem was.
By the way, just another question I had: do you know why the twitter logo takes so much time to load? I would like to solve it but didn’t really understand why was it happening.

7

You can add the image as a local resource instead of fetching it online. I think you have to be signed in on codesandbox for uploading to work.