I have been building a basic React webapp and today I thought it would be fun to put together a page to showcase a #30daycodechallenge project I have undertaken (day twos challenge is to get day ones challenge to load on my site).
Here is the code for the page in question:
import React, {Component} from 'react'
class Coding extends Component {
render() {
return (
<div>
<p
class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="isaac-tait" data-slug-hash="BaywrNQ"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Ying Yang">
<span>
See the Pen <a href="https://codepen.io/isaac-tait/pen/BaywrNQ">Ying Yang</a> by Isaac Tait (<a href="https://codepen.io/isaac-tait">@isaac-tait</a>) on <a href="https://codepen.io">CodePen</a>.
</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div>
)
}
}
export default Coding
Basically a boilerplate Codepen HTML embed copy and paste. However, the issue I am running into is that the page is showing up but the Codepen is not. Here is a link to the page in question (FYI - it is in its infancy right now).
Any help or pointers would be greatly appreciated. Cheers!
I found two things that helped fix the issue I was having.
1) I had defined my new component (the page I was featuring my CodePens on) but I had not used it within the NavBar component. I discovered the error when I ran npm start
2) I was reading this tutorial and came across the VS Code plugin html to jsx when I converted the Codepen embed into JSX it appeared in my browser window within my now functioning component.
Moral of the story: Always test your environment :D