Uncaught SyntaxError: Unexpected token '<'

Tell us what’s happening:
hi
i am new to react library and i m trying to create the quote machine but it is showing error : Uncaught SyntaxError: Unexpected token '<'
please help me to solve this i am stuck here
thank you

Your code so far
https://codepen.io/Navbham/pen/WNwBZbB

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

In your pen, click on the configuration gear at the top left corner of the JS editor and add Babel as your preprocessor, and then add React and React-DOM as external scripts. Right now, the JSX you are using in your render method isn’t being recognized as such.

1 Like

thank you for your response. its solved now.
thanks alot.

In the search cdnjs box under where you added babel, just type in ‘react’ and click the react entry in the drop-down and it will add it automatically. Same for ‘react-dom.’

hi
there is another issue when i make changes in the css it does not show. for example i changed the quote class but there is not any change in the output.
what is the issue. can you please help to solve it
thank you

When I look at your pen, all I see is the background image. When I comment out that CSS, there is nothing, so your React code is not rendering for some reason, so your CSS doesn’t have any HTML to style.

My suggestion would be to take one quote and get it to display like you want it to with only HTML (no React). Then style it like you want with CSS. Then add the buttons, again in HTML and then style them (still no React). Once you have one quote like you want it, transfer that to a simple React component (one component, no state, no props, just a render method) and get it to render like you had it with just HTML/CSS. Once you can render one quote in React like you want it rendered, you can more easily extend your code to render multiple quotes or refactor into multiple components.