Using React.js on Codepen.io, Why is the custom tag not rendering?

Question

A very beginner and dumb question maybe but still, everyone learns at first..

HTML

<div class="container" id="container">

CSS(SCSS)

$back:#1D1F20;
$font:'Open Sans',sans serif;
body{
  background-color:$back;
  padding:20px;
  h1{
    font-family:$font;
    color:white;
  }
  DisplayBox{
    font-family:$font;
    color:white;
  }
}

JS (Babel)

var DisplayBox=React.createClass({
  render:function(){
        return (
          <h1>Marked</h1>
        );
    }
});

React.render(<DisplayBox />,document.getElementById("container"));

My aim is to render the custom tag DisplayBox inside the #container but it is not rendering in codepen.io JS config in Codepen CSS config

Thank you for your help in advance :-)

Possible duplicate of [React component isn't rendered to index.html](http://stackoverflow.com/questions/40043522/react-component-isnt-rendered-to-index-html) — Shubham Khatri, Apr 12 '17 at 05:30
Since your are using 15.4.2 version of React, I suggest you to move to the ES6 way of creating React componets by extending React.Component — Shubham Khatri, Apr 12 '17 at 05:31

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Instead of

React.render(<DisplayBox />,document.getElementById("container"));

Use

ReactDOM.render(<DisplayBox />,document.getElementById("container"));

Check the working example

Check the difference between React and ReactDOM

edited May 23 '17 at 11:46

Community

1
1

answered Apr 12 '17 at 05:28

Mayank Shukla

100,735
18
158
142

Using React.js on Codepen.io, Why is the custom tag not rendering?

1 Answers1