Help with Random Quote Generator please!

JavaScript
1

Hi everyone. I dont know what I’m doing wrong on codepen. Ive got a react component set up to render my html for a quote and author combo but nothing appears. its just blank…

let me know what you see. thank you a bunch!

1 Like
2

Where is the element with id="root" in the HTML code?
Make a div or any element with id='root'.

1 Like
3

I changed it to be app, but ok- done… still doesnt show anything at all

4

Watch your quotation marks. There are non-ascii quotes being used which is throwing off the syntax of your quotes array. You can see the CodePen formatting change color from green (to indicate a string) to yellow where the issue is. (i.e. “ vs ")

You also have some issues with declaring the quotes and authors array. Should they be using let? Or should they be members of the Class? When you fix this, revisit your handleClick class to make sure the references to quotes and authors are correct there as well.

Also, double check the syntax of your render method. (specifically the return statement)

You should not include the bootstrap and font awesome libraries in the HTML section. Use the options to define those in the Settings panel.

Remember when setting class names you can’t just use class, you must use className. Verify you jsx tags as well, as there are other formatting and syntax issues.

1 Like
5

You can’t use let inside a class, delete let before let quotes and let authors. Remove the let keyword. You have to move move the div tag in the same line as the return keyword in render method. You should not use those irregular quotes, replace them with regular ones.

2 Likes
6

Thanks for your help with codepen. I’m glad it was mostly just that instead of learning errors… I still cant manage to get the button to work yet but at least something shows up.

1 Like
7

Check the handleClick function again. Pay close attention to all of your references to quotes. Check the Developer Tools Console Tab for a hint. Figuring out the issue there will get your button working, then you’ll just need to cleanup your markup because there are issues there (I see a self closing div which does not look correct, and based on the bootstrap classes you’re trying to use, you’re going to need an outer wrapper with a container class in order to use the rows the way you are doing)

Also, check your settings. You have many JS libraries that it looks like you do not need . You should just have the following:
JS

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js

CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.7/css/fork-awesome.min.css

Note: fork-awesome, should work for you based on the class names that you’re using (fa fa-twitter). If you go with font awesome you’ll need to switch things around (see font awesome’s current documentation on their website)