empty component after react render

Question

I'm trying to render a react component inside a html page. what i did so far is implementing react like this

var component =  React.createClass({
render: function(){
var testStyle = { fontSize: '18px', marginRight: '20px'};
return (
  <div>

    <h1>Hello React</h1>
    <div><ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul></div>
  </div>

  )

  }
  });

 ReactDOM.render(< component/>,
 document.getElementById('content')
 );

and in the HTML page i have this

<div id="content"></div>

when i inspect the HTMl page i find that inside the div i have an empty component like this

<component data-reactroot=""></component>

what am i doing wrong here

Lyubomir · Accepted Answer · 2017-04-29 00:06:05Z

5

A React component must always start with a capital letter, otherwise React interprets it as a simple HTML element.

Capitalized types indicate that the JSX tag is referring to a React component.

That being said, define

const Component = React.createClass...

and then render like

ReactDOM.render(<Component />, 
  document.getElementById('content')
);

answered Apr 29, 2017 at 0:06

Lyubomir

20.1k6 gold badges59 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChemseddineZ Over a year ago

thanks for your answer; that's what was missing it's now working great, i've been following a tutorial in Youtube and i guess i didn't notice the Capitalized letter

Lyubomir Over a year ago

Im glad it worked. Please accept the answer it really helps me out - the check mark next to the answer :-)

Collectives™ on Stack Overflow

empty component after react render

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related