# Render-a-class-component-to-the-dom

**URL:** <https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763>\
**Category:** General\
**Created:** [May 18, 2018, 3:33am UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763 "2018-05-18T03:33:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nayodev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nayodev/32/15669_2.png) [@nayodev](https://forum.freecodecamp.org/u/nayodev)\
**Post date:** [May 18, 2018, 3:33am UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/1 "2018-05-18T03:33:17Z")

</div>

```auto
class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* change code below this line */}
        <Fruits />
        <Vegetables />

        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById ="challenge-node");

```

---

<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:** [May 18, 2018, 4:03am UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/2 "2018-05-18T04:03:28Z")

</div>

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See [this post](http://forum.freecodecamp.com/t/forum-code-formatting/25574) to find the backtick on your keyboard. The “preformatted text” tool in the editor (`</>`) will also add backticks around text.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<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:** [May 18, 2018, 4:06am UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/3 "2018-05-18T04:06:08Z")

</div>

OK, looking at your code, It looks to be like it is the last line that is the problem. That is not how you use `document.getElementById`. A typical usage would be:

```auto
document.getElementById("element-id")

```

---

<div class="post-metadata">

**Author:** ![salehAOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salehaosman/32/116610_2.png) [@salehAOsman](https://forum.freecodecamp.org/u/salehAOsman)\
**Post date:** [July 7, 2019, 11:08pm UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/4 "2019-07-07T23:08:35Z")

</div>

Hi thanks for help

```auto

```

---

<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 7, 2019, 11:40pm UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/5 "2019-07-07T23:40:19Z")

</div>

Can you please paste all of your code?

---

<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 16, 2021, 5:54pm UTC](https://forum.freecodecamp.org/t/render-a-class-component-to-the-dom/191763/6 "2021-01-16T17:54:19Z")

</div>

Closed on January 16, 2021, 5:54pm UTC