# How to properly display React components in codepen?

**URL:** <https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602>\
**Category:** General\
**Created:** [March 23, 2020, 8:43pm UTC](https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602 "2020-03-23T20:43:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![danmcto](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@danmcto](https://forum.freecodecamp.org/u/danmcto)\
**Post date:** [March 23, 2020, 8:43pm UTC](https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602/1 "2020-03-23T20:43:08Z")

</div>

I’m trying to convert my HTML/CSS footer into a react footer, but it won’t display. I just finished working on lessons saying you could call a variable you created at any time and wanted to try and condense some code on a website I’m working on. The Footer is currently the only javascript I’m using in this assignment, so all lines of javascript make up the footers assigned const. I’ll list the codepen below if anyone could help 🙂

CODEPEN: [https://codepen.io/daniel-albano/pen/poJydQj?editors=1010](https://codepen.io/daniel-albano/pen/poJydQj?editors=1010)

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [March 23, 2020, 9:17pm UTC](https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602/2 "2020-03-23T21:17:25Z")

</div>

Hello there.

I suggest you use Babel as a preprocessor for your JavaScript, when you use React in CodePen. It is not necessary, but it could help. Also, use the formatting and analysing tool in CodePen.

Now, it is great you have created a component using React, but you have not told it where it should render… [ReactDOM](https://reactjs.org/docs/react-dom.html)

Also, you have not defined this `MyClass` thing acting as a prop. React works with `className=...` for defining CSS classes. Example:

```auto
<div class="btn-blue"></div> <!-- In HTML -->

<div className="btn-blue"></div> <!-- Equivalent in React -->

```

Honestly, some of this stuff is fundamental. So, you should probably look at the course in [fCC](https://www.freecodecamp.org/learn/front-end-libraries/react/). So, that you get an idea of the basics first.

Hope this helps

---

<div class="post-metadata">

**Author:** ![danmcto](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@danmcto](https://forum.freecodecamp.org/u/danmcto)\
**Post date:** [March 23, 2020, 10:14pm UTC](https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602/3 "2020-03-23T22:14:59Z")

</div>

I see, I’ll have to get a little further into the material before trying again I suppose. I thought with what I knew I could already implement this and I feel like I learn a bit more if I apply it into a real world scenario so I try as I go along. I’ll get back to you after I finish all of react if I can’t figure it out.

Thank you for the response though, I cleaned up a bit of it.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:32pm UTC](https://forum.freecodecamp.org/t/how-to-properly-display-react-components-in-codepen/362602/4 "2021-06-01T19:32:37Z")

</div>

Closed on June 1, 2021, 7:32pm UTC