Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:

I was using codepen and included cdns for react and reactdom latest versions. Then I learned that react and react dom come as global variables attached to window. So, I was doing the following destructuring instead of importing:
const { useState } = window.React;
const { render } = window.ReactDOM;
However, I am getting an error that there is not such a thing as useState and render inside those things. I am not sure how to solve it. https://codepen.io/N1Dovud/pen/GRbaaRe

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

Hello there @N1Dovud welcome to fcc forum. First thing in the challenge page it says:

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project.

So my advice would be if you’re stuck for right now with React try with different language. I know the same page also has instruction like use framework like React but they also say at the top of that page:

Note: React 18 has known incompatibilities with the tests for this project (see issue)

So, choice is yours now. Happy coding. Have a good day/night, thanks.

You need to use the “umd” version of the scripts (replace cjs with umd in the URL) they also are not on the window object. Or you can use the “Add Packages” instead.

https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js
const { useState } = React;
const { render } = ReactDOM;

You are also missing the font awesome component.


I would suggest you use Stackblitz or Codesandbox for React projects.

1 Like