Simple React component not rendering

Question

I have created a simple React component which displays another react component. But it doesn't render in browser :

class Home extends React.Component {
  render() {
    return (
      <div>
        <map/>
      </div>   
    );
  }
}

var map = React.createClass({
   render: function() {
      return (
          <div id="map-canvas">
            <span>hello</span>
          </div>
      );
    }
});

I'm expecting the hello to show up on the screen, but nothing shows up and when I inspect the element all I can see is

<map data-reactid=".0.0"></map>

Can any one point our what might be wrong.

Alexandre Kirszenberg · Accepted Answer · 2015-04-24 14:36:40Z

85

JSX expects component tags to be capitalized. Otherwise, it will just create a DOM element with the provided tag. See HTML Tags vs. React Components.

<map /> compiles to React.createElement("map", {}); while <Map /> compiles to React.createElement(Map, {});.

Just rename map to Map and you're good.

answered Apr 24, 2015 at 14:36

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

5 Comments

iJade Over a year ago

well that gives another error Uncaught TypeError: Cannot read property 'toUpperCase' of undefined ReactDefaultInjection.js:53

Alexandre Kirszenberg Over a year ago

Make sure that Map is correctly defined in the context of your App::render method. Also, be aware that in ES6, Map is a standard built-in object, so you might want to rename your component to something else.

iJade Over a year ago

Ok.. I renamed it to MyMap but still the same error.

iJade Over a year ago

Moving MyMap above Home resolved the issue. Thanks anyways .. :)

ncubica Over a year ago

This behaviour is not at all intuitive I was expecting <myComponent> and <MyComponent> do the same, but I can imagine why is behaving like this. kudos for your help.

Vinit Raj · Accepted Answer · 2017-03-17 10:17:49Z

1

Just make sure that variable which you declare for creating components starts with a uppercase:-Just Like this

var Map = React.createClass({
 //Your Code here

});

answered Mar 17, 2017 at 10:17

Vinit Raj

1,9101 gold badge17 silver badges16 bronze badges

Collectives™ on Stack Overflow

Simple React component not rendering

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related