Problem with random quote machine using React

Problem with random quote machine using React
0

#1

hi ,can anybody help me,i don’t know why my react app is not rendering,here is my codepen of this app : https://codepen.io/mehdij/pen/eLjWYp


#2

Make sure you save your pen. When I click on the pen, it is just the FCC template without any code.


#3

i saved the pen,can you check it now please,scroll down the editor to see the code,it’s below the comments


#4

You have a couple of issues.

#1) Because you are using Codepen, you can not use import. Instead, you need to add React and ReactDOM libraries to the JS Module. You can use which ever CDN version you want.

#2) You have the following button, but it is hard to see, because you did not provide any text.

    <button id="new-quote" onClick= {this.handleclick} >    
    </button>

I suggest adding the words New Quote between the buttons tags.

Also, JavaScript is case-sensitive, so this.handleclick refers to a non-existent method. Check your spelling and you will see how to fix.

EDIT: Also, it seems you no longer have a div element with id=“quote-box” in your HTML section, so you will need to resolve that also.


#5

thanks a lot for,i did all the things you said,and i still don’t see anything on my page.


#6

I would have to investigate further, but the version of React and ReactDOM you chose have some errors showing in the console.

Change to the following and it should work:

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

OR

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js


#7

thanks a lot,it works!!!,i used the first and second one.