React project is not rendering on Codepen

[bkuberlinov]

Hello dear Campers,

I am on the way to obtain my Front End Libraries Certification and building now the five last projects. I have just finished building the quote machine using create-react-app on my laptop and now I do not know how to put it into the codepen.

I have already activated Babel and included the react and react-dom scripts on the background, as well as axious, but my project for some reason does not render.
Could you please help me to figure out what do I do wrong and how can I fix it?

Here is the link to codepen:
https://codepen.io/BasKuBerlin/pen/ExZPzGe

Thank you very much in advance and have a good day everyone!

Your fellow camper,
Basan

[kevinSmith]

If I look in the browser debug console (not codepen’s console) I errors like this:

ReferenceError: useState is not defined

Learn to use the debug console - it will save your life one day.

In any case, codepen is a little weird in that it imports React for you behind the scenes. In a “normal” project, you’d have:

import React from 'react';

at the top of your file. If you needed named exports in there, you’d do:

import React, { useState, useRef, useEffect } from 'react';

Since you are in codepen and don’t have access to the import, you can do this destructuring instead:

const { useState, useRef, useEffect } = React;

If I put that at the top of your JS file, the React renders.

[bkuberlinov]

Thank you Kevin!
And thank you for your suggestion as well. I will learn how to use debug console.

[kevinSmith]

Yeah, it really is an incredible tool. But I did misspeak. I said, “Learn to use the debug console - it will save your life one day.” I should have said “most days”. Trying to debug code without the console and the browser dev tools is like trying to mow the lawn with a pair a scissors - sure, it can be done, but there is a much better way.

[bkuberlinov]

It’s a nice metaphor!