# React on Codepen problem: html tags throwing token errors

**URL:** <https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286>\
**Category:** General\
**Created:** [July 24, 2018, 2:35am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286 "2018-07-24T02:35:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Siege211](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/siege211/32/70283_2.png) [@Siege211](https://forum.freecodecamp.org/u/Siege211)\
**Post date:** [July 24, 2018, 2:35am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/1 "2018-07-24T02:35:05Z")

</div>

Here is the codepen:

> **[FCC MarkDownPreviewer](https://codepen.io/siege211/pen/djWMPX)**
>
> ...

A few hours ago, this exact same text rendered without issue. Suddenly, now the pen won’t load and there is an error message on whichever line has the first html tags inside of a component. Currently that’s that `<p>` tag on line 3, but if I remove that component then the same error will appear on line 19 for the `<div>` tag there. Why is codepen not able to recognize this syntax? As you can see, I’ve applied Babel, react, and react-DOM to this script file. Pls halp

---

<div class="post-metadata">

**Author:** ![KevinL622](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@KevinL622](https://forum.freecodecamp.org/u/KevinL622)\
**Post date:** [July 24, 2018, 3:10am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/2 "2018-07-24T03:10:03Z")

</div>

I have the same problem. I’m currently working on the Drum Machine project. Seems like all my projects that use React are not loading. Even the FreeCodeCamp example projects that use React aren’t loading properly. I too am curious to what is going on.

---

<div class="post-metadata">

**Author:** ![Siege211](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/siege211/32/70283_2.png) [@Siege211](https://forum.freecodecamp.org/u/Siege211)\
**Post date:** [July 24, 2018, 3:11am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/3 "2018-07-24T03:11:40Z")

</div>

I discovered the same since posting. It’s a relief to hear that someone else has noticed. That tells me it’s probably a temporary issue that codepen is having. Thank you for your reply!

---

<div class="post-metadata">

**Author:** ![Peridot](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@Peridot](https://forum.freecodecamp.org/u/Peridot)\
**Post date:** [July 24, 2018, 4:16am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/4 "2018-07-24T04:16:33Z")

</div>

Same problem here. I had all my code working for the Markdown Previewer but just needed a little tweak to the JS file and it broke. I then spent the last three hours trying to find “My Mistake”. I also can’t get the react example pens to run either so the issue must be bigger than me.

---

<div class="post-metadata">

**Author:** ![REAOrlando](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@REAOrlando](https://forum.freecodecamp.org/u/REAOrlando)\
**Post date:** [July 24, 2018, 4:53am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/5 "2018-07-24T04:53:17Z")

</div>

After some more searching, I updated my links in the JS External scripts to 15.6.1 and re-entered all my code from my local environment. The code is showing up now but still isn’t passing the tests like it does locally. [[https://codepen.io/REAOrlando/pen/ZjBvwY](https://codepen.io/REAOrlando/pen/ZjBvwY)]([http://Here](http://Here) is my codepen)

Here is the forum posted that helped me.

> [@Simple React Question: Child Component will not render](https://forum.freecodecamp.org/t/simple-react-question-child-component-will-not-render/211226):
>
> Could someone please look at this code and tell me why the child component won’t render? Whenever I put into the the render method for the parent component, the parent component breaks and won’t render any elements at all. What is wrong with my code here? const Child = (props) =\> { return ( \<p\>Well?{props.text}\</p\> ) } class App extends React.Component { constructor(props) { super(props); this.state = { quote: 'War is hard', author: 'Sun Tzu' } } rende…

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [July 24, 2018, 7:14am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/6 "2018-07-24T07:14:58Z")

</div>

@REAOrlando

You’re using jQuery in a React app? That’s like putting your dinner in the microwave and then putting it all (microwave and all) into the oven and turning it on.

If you’re adding JQ to React, then you’re misunderstanding something. They’re both overlap in that they are both manipulating the DOM. When I comment out the JQ in your app, it passes. I think the JQ is confusing the test - but it shouldn’t really be there in the first place. React expects that it is the only one manipulating the DOM and it gets confused, which seems to be confusing the tests.

---

<div class="post-metadata">

**Author:** ![Siege211](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/siege211/32/70283_2.png) [@Siege211](https://forum.freecodecamp.org/u/Siege211)\
**Post date:** [July 24, 2018, 11:59am UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/7 "2018-07-24T11:59:24Z")

</div>

My pen has also started working again, although I had version 15.6.1 on the whole time, even when it was broken last night.

---

<div class="post-metadata">

**Author:** ![REAOrlando](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@REAOrlando](https://forum.freecodecamp.org/u/REAOrlando)\
**Post date:** [July 24, 2018, 1:31pm UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/9 "2018-07-24T13:31:33Z")

</div>

😂Thank you for helping me figure out why my tests weren’t passing. Whatever issue codepen had last night with react apps, I started deleting components and scripts 1 by 1 until I could render anything. Then built it back up 1 by 1 until it almost worked except for a few failing tests. It looks like I forgot to add back the jQuery external script. That is what was keeping the tests from passing. Not the jQuery itself.

> [@kevinSmith](#):
>
> If you’re adding JQ to React, then you’re misunderstanding something. They’re both overlap in that they are both manipulating the DOM

I probably am missing something, certainly still learning here. Is there a specific reason not to use jQuery with react? I admit, I really don’t need it in this app, it’s just used here to make the auto expand with a snippet I found.

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [July 24, 2018, 6:05pm UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/10 "2018-07-24T18:05:42Z")

</div>

One of the points of react is that _ **it** _ handles the DOM.

Look at your HTML:

```auto
<div id="root"></div>

```

The rest of the DOM will be constructed and managed by React. That is a major point of React. There should be no other DOM manipulation going on or it will confuse React. React works on the assumption that it is the only one manipulating the DOM. JQ is a little more free because it doesn’t have one-way data binding and you have to explicitly make the changes that you want so it is not big deal to JQ if someone else is manipulating the DOM (like with vanilla JS) because JQ assumes that you are in control. But React does a lot of this behind the scenes for you and it just assumes… If you make a change on your own, it will confuse 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:** [January 17, 2021, 8:18pm UTC](https://forum.freecodecamp.org/t/react-on-codepen-problem-html-tags-throwing-token-errors/211286/11 "2021-01-17T20:18:03Z")

</div>

Closed on January 17, 2021, 8:18pm UTC


